Question

我注意到在博斯托克的most recent block他有一个'开始'事件：

d3.select("body").selectAll("div")
    .data(d3.range(n))
  .enter().append("div")
  .transition()
    .delay(function(d, i) { return i + Math.random() * n / 4; })
    .ease(d3.easeLinear)
    .on("start", function repeat() {
        d3.active(this)
            .styleTween("background-color", function() { return whiteblue; })
          .transition()
            .delay(1000)
            .styleTween("background-color", function() { return blueorange; })
          .transition()
            .delay(1000)
            .styleTween("background-color", function() { return orangewhite; })
          .transition()
            .delay(n)
            .on("start", repeat);
      });

有谁知道这是做什么的？

它是等效于加载还是在转换开始的延迟时间之后被触发？

Answer 1

该块以d3 v4编写。看起来v3 transition.each已重命名为transition.on（这更有意义）。那就是说start一直是转型的事件类型：

如果指定了type，则为转换事件添加一个侦听器，   支持“开始”，“结束”和“中断”事件。听众会   为过渡中的每个单独元素调用。

在第一次异步回调期间调用start事件   在调用任何补间之前，转换（勾选）转换。对于   零延迟的转换，通常在约17ms之后   过渡计划。状态事件对触发很有用   每个元素的瞬时更改，例如更改属性   无法插值的。

回答你的具体问题（我的上面的粗体）“或是在延迟期过后开始转换时” - 是的。

Answer 2

我一直在试图解决这个问题。＆＃34;开始＆＃34;不是正常的DOM事件，也不是D3提供的事件之一。经过一番研究后，我发现了以下内容：

＆＃34;过渡是一种有限形式的关键帧动画，只有两个关键帧：开始和结束＆＃34;

＆＃34;然后调度start事件，转换初始化其补间，这可能涉及从DOM检索起始值并构建插值器。＆＃34;

来自：https://bost.ocks.org/mike/transition/

（直接来自d3-transition repo @ https://github.com/d3/d3-transition#active，请参阅＆＃34;使用转换＆＃34;链接）。

我相信示例中使用的D3转换库隐式使用相同的 - 也就是说，转换有两个关键帧。＆＃34;开始＆＃34; ＆＃34;事件＆＃34;实际上代表了第一个关键帧。实际上，当转换开始时会有轻微的延迟，因此有必要等到关键帧“＃34;”＃34开始。

d3.js中的'start'事件是什么？

2 个答案: