Question

我这里有个突如其来的飞车-https://stackblitz.com/edit/simple-line-chart?embed=1&file=src/app/bar-chart.ts&hideNavigation=1

使用D3绘制的简单折线图

我想从左到右为线设置动画。

无法找到许多最好的解释方式

实际图形也将具有条形图，因此我无法在顶部设置动画和白色块以显示线条

Answer 1

这都是this问题。

  private transition(path) {
    var that = this;
      path.transition()
        .duration(2000)
        .attrTween("stroke-dasharray", that.tweenDash);
  }

  private tweenDash() {
    var l = this.getTotalLength(),
        i = d3.interpolateString("0," + l, l + "," + l);
    return function (t) { return i(t); };
  }

  private drawLine(linedata:any){
    // ....

    var p = this.lineArea.append("path")
      .attr("class", "line")
      .attr("d", valueline(linedata))
      .attr("stroke-linejoin", "round")
      //.call(that.transition)
      ;
    this.transition(p);
  }

修改

我们为什么需要i？

这是相同的

  private tweenDash() {
    var l = this.getTotalLength();
    return d3.interpolateString("0," + l, l + "," + l);
  }

Answer 2

为什么要使用补间功能，内插器和this？

最简单，最常见的解决方案是简单地将stroke-dasharray和stroke-dashoffset设置为总长度...

var totalLength = thisLine.node().getTotalLength();

thisLine.attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength);

然后通过简单的转换对其进行更改：

thisLine.transition()
    .duration(1000)
    .attr("stroke-dashoffset", 0);

无需补间stroke-dasharray。

以下是分叉的代码：https://stackblitz.com/edit/simple-line-chart-3hpaje?file=src/app/bar-chart.ts

动画线图线

2 个答案: