CODEWITHSUNDEEP
javascriptanimationd3.js
rnaikzz
rnaikzz

Reputation: 123

Transition for a line chart in D3

I have built a multi series line chart using the D3 library. I have been trying to work on animating the line chart so I can give out one line at a time and not all 5 of them together. Can anybody give me some ideas as to how I can go about with this? I have tried using transition() but I seem to be using it wrong. This is what I have done so far - 

  var city = svg.selectAll(".city")
  .data(years)
  .enter().append("g")
  .attr("class", "city");

   city.append("path")
  .attr("class", "line");`

  d3.transition().selectAll(".line")
  .duration(500)
  .ease("linear")
  .attr("d", function(d){return line(d.values); })
  .style("stroke", function(d) {return color(d.name); })
  .attrTween("d",pathTween);

function pathTween() {
var interpolate = d3.scale.quantile()
.domain([0,1])
.range(d3.range(1,years.length+1));
return function(t){
  return line(data.slice(0,interpolate(t)));
};

Upvotes: 0

Views: 3908

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109272

D3 transitions have a .delay() method that allows you to set a delay before each transition starts. In your case (having each line start separately) it would look like this:

d3.transition().selectAll(".line")
  .duration(500)
  .delay(function(d, i) { return i * 500; })
  .ease("linear")
  .attr("d", function(d){return line(d.values); })
  .style("stroke", function(d) {return color(d.name); });

This takes the index of each line (i) and offsets the start of the transition depending on that.

Upvotes: 3

Related Questions