尝试进行路径补间时，d3路径被绘制了两次

Question

我正在使用这种技术来补间d3中的路径：

我正在对节点之间的弧线进行动画处理。我的数据如下：

this.transfers = [[1, 480, 0, 5], [2, 0, 480, 20], [3, 0, 720, 5], [3, 240, 720, 5], [3, 480, 720, 5], [5, 480, 0, 5]];

代码的目的是可视化游戏玩法。上面每个内部数组的第一个元素是游戏的回合，接下来的两个是转移了一些点的节点的x坐标-第一个节点拱起到第二个节点-第四个是转移的点数。我正在尝试编写一个圆弧，以在参与传输的节点之间进行补间，使圆弧从一个节点扫到另一个节点。这是补间弧的代码：

this.linkAnimation = this.svg.append('g')
  .selectAll('path')
  .data (self.transfers)
  .enter()
  .append('path')
  .attr('fill', 'none');

this.timedAnimation();

timedAnimation( ) {
  for (let j = 0; j < this.rounds+1; j++ ) {

    this.linkAnimation = this.linkAnimation
      .transition()              // transition for delay between rounds
      .delay(2000)
      .attr('d', (t, i) => {
        if (j == t[0]) {
          let denominator = (t[1] < t[2])? 1.75 : 2; // to keep forward and reverse arcs from tracing the same path
          return ['M', t[1], self.height, 'A',
            (t[1] - t[2])/2, ',',
            (t[1] - t[2])/denominator, 0, 0, ',',
            t[1] < t[2] ? 1 : 0, t[2], ',', self.height]
            .join(' ');
        }
      })
    .attr('stroke-width', d => this.linkWidth(d[3]))
    .call(this.transition);
  }
}

transition(path) {
  path.transition()
    .duration(2000)
    .attrTween("stroke-dasharray", self.tweenDash);
}

tweenDash(path) {
  let l = this.getTotalLength(),
    i = d3.interpolateString("0," + l, l + "," + l);
  if (l == 0) { return; } else {
    return function(t) { return i(t); };
}

问题在于每个圆弧连续绘制两次。在补间弧出现之前，它会完全绘制（不补间）。

Answer 1

在动画开始时，您必须初始化stroke-dasharray。

为初始破折号选择一个非常大的尺寸，大于要绘制的任何路径长度。

.attr('stroke-width', d => this.linkWidth(d[3]))
.attr('stroke-dasharray', "0,1000000")
.call(this.transition);