Animate line graph line

Question

I have a stackblitz here - https://stackblitz.com/edit/simple-line-chart?embed=1&file=src/app/bar-chart.ts&hideNavigation=1

Its a simple line graph using D3

I'd like to animate the line from left to right.

Cant find many of this or anything explaing the best way

The actual graph will have a bar chart as well so I cant animate and white block on top to show the line

what a simple search with your favorite search engine can find: https://bl.ocks.org/pjsier/28d1d410b64dcd74d9dab348514ed256 — rioV8, Aug 16 '18 at 11:39
This one of the examples I found, but I can't get it to work in my example — ttmt, Aug 16 '18 at 12:19
https://stackblitz.com/edit/simple-line-chart-n7qqas?embed=1&file=src/app/bar-chart.ts&hideNavigation=1 — ttmt, Aug 16 '18 at 12:36
Did you check the code in the example @rioV8 referred to? The transition is applied using `stroke-dasharray` and not to the `d` of the `path`. It works very well indeed: here's a fork: [stackblitz.com/edit/...](https://stackblitz.com/edit/simple-line-chart-mgaguj?file=src/app/bar-chart.ts) — Shashank, Aug 16 '18 at 13:16
@Shashank : the tween dash can be simplified. What is the use of `i`? See my edit of my answer. — rioV8, Aug 16 '18 at 13:58
@rioV8 True that. @ttmt: Here's [Mike's Stroke-dash-interpolation example with explanation](https://bl.ocks.org/mbostock/5649592) you can refer to as well along with exclusion of not-so-necessary `i`. — Shashank, Aug 16 '18 at 14:09

rioV8 · Answer 1 · 2018-08-16T13:55:31.990

It is all a this problem.

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

Edit

Why do we need i?

This is the same

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

Ah! The `this` problem. [This](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback#answer-20279485) is a fantastic answer/response to the `this` problem. — Shashank, Aug 16 '18 at 14:12

Gerardo Furtado · Accepted Answer · 2018-08-17T05:49:23.190

Why messing around with a tween function, interpolators and this?

The easiest and most common solution is simply setting the stroke-dasharray and the stroke-dashoffset for the total length...

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

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

And then changing it with a simple transition:

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

No need for tweening the stroke-dasharray.

Here is the forked code: https://stackblitz.com/edit/simple-line-chart-3hpaje?file=src/app/bar-chart.ts

Animate line graph line

2 Answers2

Linked