D3 中折线图的过渡

Question

我使用 D3 库构建了一个多系列折线图。我一直在尝试制作折线图的动画，这样我就可以一次给出一条线，而不是所有 5 条线都放在一起。任何人都可以给我一些关于如何处理这个的想法吗？我试过使用 transition() 但我似乎用错了。这是我到目前为止所做的 -

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

Answer 1

D3 转换有一个 .delay() 方法，允许您在每个转换开始之前设置延迟。在您的情况下（每行分别开始）它看起来像这样：

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

这会获取每行的索引 (i) 并据此偏移过渡的开始。

D3 中折线图的过渡

Transition for a line chart in D3

javascript

animation

d3.js