我使用 D3 库构建了一个多系列折线图。我一直在尝试制作折线图的动画,这样我就可以一次给出一行,而不是全部 5 条一起给出。有人能给我一些关于如何处理这个问题的想法吗?我尝试过使用transition(),但我似乎用错了。这就是我到目前为止所做的 -
var city = svg.selectAll(".city")
.data(years)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line");`
d3.transition().selectAll(".line")
.duration(500)
.ease("linear")
.attr("d", function(d){return line(d.values); })
.style("stroke", function(d) {return color(d.name); })
.attrTween("d",pathTween);
function pathTween() {
var interpolate = d3.scale.quantile()
.domain([0,1])
.range(d3.range(1,years.length+1));
return function(t){
return line(data.slice(0,interpolate(t)));
};
最佳答案
D3 转换有一个 .delay()
方法,允许您在每次转换开始之前设置延迟。在您的情况下(每行单独开始),它看起来像这样:
d3.transition().selectAll(".line")
.duration(500)
.delay(function(d, i) { return i * 500; })
.ease("linear")
.attr("d", function(d){return line(d.values); })
.style("stroke", function(d) {return color(d.name); });
这获取每行的索引 (i
) 并根据该索引偏移转换的开始位置。
关于javascript - D3 中折线图的转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28268961/