以编程方式触发D3画笔事件

Question

我看过示例here和here是一个用JavaScript触发的画笔。我想了解first一个的实现。

背景

first example在一个svg容器中捆绑两个D3折线图;类focus和context分别为：

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

当我们查看其组容器时，我们找到指定的画笔参数;在extent类下：

问题1。

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

function drawBrush(a, b) {
      // define our brush extent

      // note that x0 and x1 refer to the lower and upper bound of the brush extent
      // while x2 refers to the scale for the second x-axis, for context or brush area.
      // unfortunate variable naming :-/
      var x0 = x2.invert(a*width)
      var x1 = x2.invert(b*width)
      console.log("x0", x0)
      console.log("x1", x1)
      brush.extent([x0, x1])

      // now draw the brush to match our extent
      // use transition to slow it down so we can see what is happening
      // set transition duration to 0 to draw right away
      brush(d3.select(".brush").transition().duration(500));

      // now fire the brushstart, brushmove, and brushend events
      // set transition the delay and duration to 0 to draw right away
      brush.event(d3.select(".brush").transition().delay(10duration(500))
}

在brush(d3.select(".brush").transition().duration(500));中，使用转换前置条件选择当前画笔参数;传递给brush，因此它可以根据更改的brush.extend值绘制新画笔。

在brush.event(d3.select(".brush").transition().delay(10duration(500))中，似乎上一行设置了参数，之后brush.event 使用新的画笔参数执行。有人能理解这个吗？ brush events如何适用于此案例？

问题2。

我也不知道这个事件动作是如何准确地链接回focus ed图表的。如果通过回调找到机制非常神秘：

var brush = d3.svg.brush()
      .x(x2)
      .on("brush", brushed);

这个片段看起来非常清晰： 刷子被制作并链接到brush事件监听器。在刷子事件中，brushed将充当事件处理程序。此外，context的x轴x2的比例将传递给画笔，因为它位于context图表上。

但我不太确定brushed是如何运作的：

  function brushed() {
    x.domain(brush.empty() ? x2.domain() : brush.extent());
    focus.select(".area").attr("d", area);
    focus.select(".x.axis").call(xAxis);
  }

可以肯定的是，在focus.select(".x.axis").call(xAxis);中使用brush中设置的x.domain(brush.empty() ? x2.domain() : brush.extent());参数生成新轴是否正确？

Answer 1

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

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

回到你的问题，你试图理解brush events与它有什么关系的困惑很简单：你正在阅读 D3 v4 docs ，而该代码使用 D3 v3 。

这是D3 v3中的brush.event：

  

brush.event（选择）

     

如果选择是一个选择，它会将一个画笔手势作为三个事件序列发送给已注册的侦听器：brushstart，brush和brushend。在以编程方式设置画笔范围后触发侦听器时，这非常有用。 （强调我的）

您可以清楚地看到，第一行更改了画笔本身（上下文），而第二行更改了大区域图表（焦点）。 / p>