我是新来的,一般是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; });
解决方法
您可以使用
.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);
});
