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

如果我理解正确（我可能不会），那么没有开箱即用的解决方案，而不会陷入困境。但是，如果selection.interrupt()是您正在寻找的形式，我相信您可以以相对简单的方式构建功能。

为此，您需要为访问转换数据的d3选项创建新方法（位于：selection.node().__transition）。转换数据包括补间数据，计时器和其他转换细节，但最简单的解决方案是将持续时间设置为零，这将迫使转换结束并将其置于最终状态：

__transition数据变量可以有空槽（可变数字），这可能会导致firefox的悲痛（据我所知，当使用forEach循环时），所以我已经使用密钥方法获取包含转换的非空插槽。

d3.selection.prototype.finish = function() {
    var slots = this.node().__transition;
    var keys = Object.keys(slots);
    keys.forEach(function(d,i) {
        if(slots[d]) slots[d].duration = 0;
    })  
}

如果使用延迟，您还可以触发定时器回调，例如：if(slots[d]) slots[d].timer._call();，因为将延迟设置为零不会影响过渡。

使用此代码块，您调用selection.finish()将强制转换到其结束状态，单击一个圆圈以调用该方法：

＆＃13;

d3.selection.prototype.finish = function() {
  var slots = this.node().__transition;
  var keys = Object.keys(slots);
  keys.forEach(function(d,i) {
    if(slots[d]) slots[d].timer._call(); 
  })	
}
	
var svg = d3.select("body")
   .append("svg")
   .attr("width", 500)
   .attr("height", 500);
	
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).finish() })
	
circle
   .transition()
   .delay(function(d) { return d * 500; })
   .duration(function(d) { return d* 5000; })
   .attr("cx", 460)
   .on("end", function() {
      d3.select(this).attr("fill","steelblue"); // to visualize end event
   })

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js"></script>

＆＃13;

当然，如果您想保留方法d3-ish，请返回选择，以便您可以在之后链接其他方法。为了完整起见，您需要确保完成转换。通过这些添加，新方法可能类似于：

d3.selection.prototype.finish = function() {
  // check if there is a transition to finish:
  if (this.node().__transition) {
      // if there is transition data in any slot in the transition array, call the timer callback:
      var slots = this.node().__transition;
      var keys = Object.keys(slots);
      keys.forEach(function(d,i) {
        if(slots[d]) slots[d].timer._call(); 
   })   
  }
  // return the selection:
  return this;
}

这是一个bl.ock这个更完整的实现。

以上是D3的第4版和第5版。要在版本3中复制它有点困难，因为定时器和转换在版本4中稍作重写。在版本3中，它们不太友好，但是可以通过稍微修改来实现行为。为了完整性，d3v3示例的here's a block。

Answer 2

Andrew's answer是一个很棒的人。然而，仅仅为了好奇，我相信可以在不扩展原型的情况下完成，使用.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)
})

以下是演示：

＆＃13;

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)
  })

＆＃13;

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

＆＃13;

PS：与Andrew's answer不同，由于我在此处使用d3.active(node)，因此点击仅在转换已经开始时有效。

冲洗d3 v4过渡

2 个答案: