javascript - 过渡期间的火灾事件

Question

有没有办法在转换处于某种状态时触发事件？例如，在下面的代码中，我有一个在屏幕上滚动的文本 block 。当文本 block 到达某个 x 坐标时，我希望触发一个事件(即突出显示文本)。

有没有办法通过转换来做到这一点，或者完成类似事情的最佳方法是什么？

Player.e.select('#activeTranscript')
            .transition()
            .each(function(d, i) {
                var test = 'test';
            })
            .ease('linear')
            .duration(function() {
                return Player.active_transcript.length * 500;
            })
            .attr('x', function(){
                return  -this.clientWidth;
            });

Answer 1

如果您知道文本到达 x 坐标需要多长时间，您可以让您的函数触发，然后使用 setTimeout 或 d3.timer。

要在转换期间精确控制触发事件，您必须使用 attrTween 和自定义插值来动手:

  .transition().duration(3000)
    .attrTween('y', function(d, i, a){
      var interpolator = d3.interpolate(a, 400);
      var halfWayDone = false;
      return function(t){
        if (t > .5 && !halfWayDone){
          d3.select('body').append('div').text('halfway done at ' + t);
          halfWayDone = true;
        }
        return interpolator(t);
      }
    })    

http://bl.ocks.org/1wheel/7800813