线图线动画

为什么要在函数、插值函数和 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);

不需要用粗花呢 笔划dasharray

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

一切都是 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);
  }