通过绑定新数据操作元素
通过绑定新数据操作元素
提问于 2012-03-01 22:42:45
我正在尝试解决如何通过绑定新数据来更新一些D3.js元素。我真的不确定这是否可能，但感觉应该是这样。
因此，首先我创建了四个SVG圆，并将cx偏移量设置为数据的函数：
<body><div id="container"></div></body>
var svg = d3.select("div.container").append("svg")
.attr("class", "chart")
.attr("width", 1000)
.attr("height", 500);
// Create initial data and display
var data = [0, 10, 20, 30];
var circle = svg.selectAll("circle")
.data(data)
.enter()
.append('circle')
.attr("cx", function(d) {
return d*10;
})
.attr("cy", 100)
.attr("r", 10)
.style("fill", "steelblue");接下来，我附加了新数据和一个转换。我希望看到圆圈慢慢地移动到新的位置(这就是我试图实现的)，但它们没有：
var data1 = [40, 50, 60, 70];
circle.data(data1).transition().duration(2500);我是不是犯了一个基本错误？也许我选错了。或者仅仅通过操作数据来更新元素是不可能的？
更新:如果我执行console.log(circle)，那么我会看到一个SVG circle元素数组，这是我所期望的。
回答 2
Stack Overflow用户
发布于 2012-03-02 01:33:09
好了，现在我明白了！您需要告诉它要转换的内容：
circle.data(data1).transition().duration(2500).attr("cx", function(d) {
return d*10;
});Stack Overflow用户
发布于 2014-04-07 07:34:56
将新数据添加到现有可视化的一个非常好的资源是关于更新数据的官方教程。
http://bl.ocks.org/mbostock/3808221
主要的要点是，您希望在调用数据时定义一个关键函数，以便d3可以跟踪哪些数据是新数据，哪些数据是旧数据。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9518186
复制相关文章
相似问题