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

多线图中的交错过渡

1 个答案: