我真的可以使用一些指导来设置我的多系列折线图的过渡。作为我需要的一个例子,我从这个伟大的多系列折线图开始:http://bl.ocks.org/mbostock/3884955。在该代码中,我添加了一个update()函数,该函数使用setInterval()调用一次。我还创建了一个名为data2.csv的新数据集,它与data类似。但有不同的值。
更新函数应该改变折线图显示的数据。忘记做一个漂亮的平滑过渡,我甚至不能在图表视图中更新数据。当我尝试使用更新函数时,看起来新数据被正确加载到javascript变量中,但图表上的线条根本没有改变。
我看到这个问题被问了几次,但还没有找到答案。谁能帮我弄清楚如何将这个多系列折线图转换为新的数据集(也是多系列)?
function update() {
d3.csv("data2.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
// format the date
data.forEach(function(d) {
d.date = parseDate(d.date);
});
// rearrange the data, same as in the original example code
var cities2 = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, temperature: +d[name]};
})
};
});
// update the .city g's to the new dataset
var city2 = svg.selectAll(".city")
.data(cities2);
// redraw the lines with the new data???
city2.selectAll("path")
.attr("d", function(d) { return line(d.values); });
clearInterval(transitionInterval);
});
}
UPDATE: NikhilS的回答包含了评论跟踪中解决方案的关键。
您应该确保遵循Mike Bostock在他关于通用更新模式的文章中概述的enter +更新过程。看起来你没有调用任何d3 transition
。您还没有为更新函数指定进入或退出,如果有新数据传入和/或旧数据传出,这将导致问题。试着修改一下:
var city2 = svg.selectAll(".city")
.data(cities2);
city2.selectAll("path")
.attr("d", function(d) { return line(d.values); });
到下面:
var city2 = svg.selectAll('.city')
.data(cities2);
var cityGroups = city2.enter().append('g')
.attr('class', 'city');
cityGroups.append('path')
.attr('class', 'line');
d3.transition().selectAll('.line')
.attr('d', function(d) { return line(d.values); });
city2.exit().remove();
我做了一个基本的数据重新连接和更新演示,你可以在这里查看。
使用d3过渡,你可以做一些动画。
如果你想选择数据的子区间来绘制图形,不需要对数据进行操作,只需使用d3画笔并剪辑图形
对于包含大多数线形图元素的多系列线形图,您可以参考以下示例:http://mpf.vis.ywng.cloudbees.net/