多线图中的交错过渡

Question

我是新来的，一般来说是 d3.js/JavaScript。我想向多线图添加过渡，以便每条线（和相关标签）一个接一个地“绘制”。我已经设法让它适用于第一行（在较小程度上同时适用于所有行），但我正在努力了解如何错开过渡。我已经尝试使用for 循环和.each() 通过函数调用转换，但是这两种方法都没有真正实现。任何帮助将不胜感激。下面代码的相关部分。谢谢。

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

var path = country.append("path")
    .attr("class", "line")
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { return color(d.country); })

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

d3.select(".line")
    .attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength)
  .transition()
    .duration(1000)
    .ease("linear")
    .attr("stroke-dashoffset", 0)
    .each("end", function() {
        d3.select(".label")
          .transition()
            .style("opacity", 1);
        });

var labels = country.append("text")
    .datum(function(d) { return {country: d.country, value: d.values[d.values.length - 1]}; })
    .attr("class", "label")
    .attr("transform", function(d) { return "translate(" + x(d.value.month) + "," + y(d.value.rainfall) + ")"; })
    .attr("x", 3)
    .attr("dy", ".35em")
    .style("opacity", 0)
    .text(function(d) { return d.country; });

Answer 1

您可以将.delay() 与函数一起使用：

d3.select(".line")
  .attr("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-dashoffset", totalLength)
.transition()
  .delay(function(d, i) { return i * 1000; })
  .duration(1000)
  .ease("linear")
  .attr("stroke-dashoffset", 0)
  .each("end", function() {
    d3.select(".label")
      .transition()
        .style("opacity", 1);
    });