[英]Transition for a line chart in D3
I have built a multi series line chart using the D3 library. 我已经使用D3库构建了多系列折线图。 I have been trying to work on animating the line chart so I can give out one line at a time and not all 5 of them together. 我一直在尝试对折线图进行动画处理,因此我一次只能给出一条折线,而不是全部5条折线。 Can anybody give me some ideas as to how I can go about with this? 有人能给我一些有关如何解决这个问题的想法吗? I have tried using transition() but I seem to be using it wrong. 我尝试使用transition(),但似乎使用错误。 This is what I have done so far - 这是我到目前为止所做的-
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 transitions have a .delay()
method that allows you to set a delay before each transition starts. D3转换具有.delay()
方法,可让您设置每次转换开始之前的延迟。 In your case (having each line start separately) it would look like this: 在您的情况下(每行分别开始),它看起来像这样:
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); });
This takes the index of each line ( i
) and offsets the start of the transition depending on that. 这将获取每行的索引( i
),并据此偏移过渡的开始。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.