Javascript 以编程方式触发D3笔刷事件

我已经看到了一些例子，它们都是用JavaScript触发的笔刷。我想了解一个的实现

背景

将两个D3折线图捆绑在一个svg容器中；分别分类

焦点

和

上下文

：

上下文

图表（上面用浅蓝色标记）是包含画笔的图表，可通过鼠标单击触发：

当我们查看它的组容器时，我们会找到指定的笔刷参数；在

范围下

类：

问题1.

我不明白最后两行发生了什么，特别是最后一行：

功能画笔（a、b）{
//定义我们的画笔范围
//请注意，x0和x1表示笔刷范围的下限和上限
//x2表示第二个x轴的比例，用于上下文或笔刷区域。
//变量命名错误：-/
var x0=x2.内底（a*宽度）
变量x1=x2.反向（b*宽度）
console.log（“x0”，x0）
console.log（“x1”，x1）
刷程（[x0，x1]）
//现在绘制笔刷以匹配我们的范围
//使用transition将其减慢，以便我们可以看到正在发生的事情
//将过渡持续时间设置为0以立即绘制
画笔（d3.选择（“.brush”）.transition（）.duration（500））；
//现在启动brushstart、brushmove和brushend事件
//将延迟和持续时间设置为0以立即绘制
brush.event（d3.select（“.brush”）.transition（）.delay（10持续时间（500））
}

在

画笔（d3.选择（“.brush”）.transition（）.duration（500））；

中，当前画笔参数通过一个transition前提条件进行选择；该前提条件被传递到

画笔

，因此它可以根据更改的

画笔.扩展

值绘制新画笔

在

brush.event（d3.select（“.brush”）.transition（）.delay（10duration（500））

中，前一行似乎设置了参数，之后

brush.event

将使用新的笔刷参数执行。有人能理解这一点吗？如何应用于这种情况

问题2.

我也不知道这个事件操作是如何链接回

focus

ed图表的。如果通过回调发现机制非常神秘：

var brush=d3.svg.brush（）
.x（x2）
.在（“刷子”，刷子）；

这段代码看起来非常清晰：画笔被制作并链接到

brush

事件侦听器。在画笔事件中，brusheed将充当事件处理程序。此外，

context

的x轴

x2

的比例被传递到画笔，因为它位于

context

图表上

但我不太确定刷刷是如何工作的：

函数刷过（）{
x、 域（brush.empty（）？x2.domain（）：brush.extent（））；
焦点。选择（“.area”）.attr（“d”，区域）；
焦点。选择（“.x.axis”）。调用（xAxis）；
}

---

为了确保这一点，在

焦点中生成一个新轴是否正确。使用
x.domain（brush.empty（）？x2.domain（）：brush.extent（））；
？中设置的
brush
参数选择（.x.axis”）.call（xAxis）；

首先，最后一行有一个打字错误。在代码中，它实际上是：

brush.event(d3.select(".brush").transition().delay(1000).duration(500))

回到您的问题，您在试图理解与它有什么关系时所面临的困惑非常简单：您正在阅读d3v4文档，而该代码使用d3v3

这是在D3V3中：

笔刷事件（选择）

如果选择是一个选择，它会将画笔手势作为三个事件序列发送给注册的侦听器：画笔开始、画笔和画笔结束。这在以编程方式设置画笔范围后触发侦听器时非常有用（emphasis mine）

---

正如您可以清楚地看到的，第一行更改笔刷本身（上下文），而第二行更改大面积图表（焦点）.

好吧，

brushstart

和

brushend

事件的目的是什么？据我所知，如果选择是一个过渡，每个新的勾号都会触发笔刷事件；笔刷在过渡过程中被调度*。这是否公正，因为我们有办法标记笔刷过渡的开始和结束？我想是这样的与启用以编程方式设置笔刷范围有关，但我看不到

brushstart

和

brushend

如何启用任何内容。