[英]D3.js transition multiple lines - data doesn't update
我正在尝试在过滤数据时更新多线图。 但是,当轴按原样过渡时,我的行会使用旧的未过滤数据进行更新; 使其超出图表区域。 我的问题似乎是过渡部分,但我似乎无法弄清楚。
当y轴保持不变时,我有一些工作示例,但对于这种类型的变化数据却没有。 我认为我可以删除所有旧路径,但据我所知,只要我们不需要添加更多行,我就应该能够进行更新?
这是一个工作的jsFiddle,而不是旧的墙代码。 它是比我先前发布的代码更简单的图形,但是基本问题是相同的。 该行不更新。
测试代码:
$('input[type=button]').click( function() {
Arr1 = [{Antal:3000,Datum:parseDate("2008-03-30")},{Antal:2000,Datum:parseDate("2008-06-30")}];
Arr2 = [{Antal:5000,Datum:parseDate("2008-03-30")},{Antal:8300,Datum:parseDate("2008-06-30")}];
data = Arr1.concat(Arr2)
dsMainArr = [{name: "primary",values:Arr1},{name: "specialist",values:Arr2}];
// redraw the line
city
.attr("d", line)
.attr("transform", null);
//update x domain for axis labels
y.domain([
d3.min(dsMainArr, function(c) { return d3.min(c.values, function(v) { return v.Antal; }); }),
d3.max(dsMainArr, function(c) { return d3.max(c.values, function(v) { return v.Antal; }); })
]);
//slide xAxis
svg.select(".y.axis")
.transition()
.duration(300)
.ease("linear")
.call(yAxis);
//slide the line to the left
city.transition()
.duration(500)
.ease("linear")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
});
http://jsfiddle.net/1x0k3Lzd/34/
有什么问题的想法吗?
代替
city
.attr("d", line)
.attr("transform", null);
和
city.transition()
.duration(500)
.ease("linear")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
你需要类似的东西
city
.data(dsMainArr)
.select('.line')
.transition()
.duration(500)
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
在本地重新定义dsMainArr
,需要再次包含data(dsMainArr)
。
顺便说一句,注意
d3.select('input[type=button]').on("click", function(){})
作为
$('input[type=button]').click(function(){})
这是更新的jsfiddle的链接: http : //jsfiddle.net/47xnn07h/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.