小编use*_*692的帖子

我是新来的,一般是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(" + …

我把一个多线图放在一起,它有一个过渡集,所以线条被"绘制",标签一个接一个地附加.它工作,但我无法看到如何单独访问每一行的长度.我的代码只返回第一个路径的长度.node().结果是所有路径都给出了第一个路径的长度,这为其他路径提供了错误的起始点.代码如下.任何帮助深表感谢.

var margin = {top: 20, right: 80, bottom: 30, left: 60},
    width = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangePoints([0, width], 1);

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.category20();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var line = d3.svg.line()
    .interpolate("linear")
    .x(function(d) { return x(d.month); })
    .y(function(d) { return y(d.rainfall); });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left …