我是新来的,一般是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; });

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