Question

当转换处于特定状态时，是否有办法触发事件？例如，在下面的代码中，我有一个滚动屏幕的文本块。当文本块到达某个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

过渡期间的火灾事件

1 个答案: