d3.js - 刷新 d3 v4 过渡

Question

有人知道“冲洗”过渡的方法吗？
我有一个定义如下的过渡:

this.paths.attr('transform', null)
  .transition()
  .duration(this.duration)
  .ease(d3.easeLinear)
  .attr('transform', 'translate(' + this.xScale(translationX) + ', 0)')

我知道我能做到

this.paths.interrupt();

停止过渡，但这并没有完成我的动画。我希望能够“刷新”立即完成动画的过渡。

Answer 1

Andrew's answer是一个伟大的。但是，出于好奇，我相信可以在不扩展原型(prototype)的情况下使用 .on("interrupt"作为听众。

在这里，我无耻地复制 Andrew 代码进行转换和 this answer用于获取目标属性。

selection.on("click", function() {
    d3.select(this).interrupt()
})

transition.on("interrupt", function() {
    var elem = this;
    var targetValue = d3.active(this)
        .attrTween("cx")
        .call(this)(1);
    d3.select(this).attr("cx", targetValue)
})

这是演示:

var svg = d3.select("svg")

var circle = svg.selectAll("circle")
  .data([1, 2, 3, 4, 5, 6, 7, 8])
  .enter()
  .append("circle")
  .attr("cx", 50)
  .attr("cy", function(d) {
    return d * 50
  })
  .attr("r", 20)
  .on("click", function() {
    d3.select(this).interrupt()
  })

circle
  .transition()
  .delay(function(d) {
    return d * 500;
  })
  .duration(function(d) {
    return d * 5000;
  })
  .attr("cx", 460)
  .on("interrupt", function() {
    var elem = this;
    var targetValue = d3.active(this)
      .attrTween("cx")
      .call(this)(1);
    d3.select(this).attr("cx", targetValue)
  })

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="500"></svg>

PS:不像Andrew's answer , 因为我使用的是 d3.active(node)在这里，点击仅在转换 时有效已开始已经。