D3 Javascript:删除和更新元素
D3 Javascript:删除和更新元素
提问于 2016-09-02 04:20:32
我只有一个简单的数字列表，即使用setInteval()函数并调用update()。它不是在每次调用后删除号码，而是将其附加到后面。我尝试使用d3.select("g").remove()，但也不起作用。有人能解释一下这一点吗，最好解释一下enter()和exit()方法，因为我很难理解这些调用。
var svg = d3.select("#first").append("svg")
.attr("width",500)
.attr("height", 500);
function update(data) {
var text = svg.select("g")
.data(data);
text.enter()
.append("text")
.text(function(d) {
return d;
});
text.exit().remove();
}
setInterval(function() {
var data = [];
for (var i = 0; i < 5; i++) {
data[i] = Math.round(Math.random() * 10);
}
console.log(data);
update(data);
}, 2000);回答 1
Stack Overflow用户
回答已采纳
发布于 2016-09-02 09:01:00
这里的问题是缺少单独的"enter“和"update”选项(除此之外，您没有正确地将文本附加到SVG，所以我稍微修改了您的代码)。
在这里绑定数据：
var text = svg.selectAll(".myText")
.data(data);这是你的“data.length”选择(因为你的退出总是一样的，你甚至不需要这个选择)：
text.exit()
.remove();现在，变化来了。这是您的enter选择(同样，由于您的data.length始终为5，因此"enter“仅在您第一次调用函数时有效)：
text.enter()
.append("text")
.attr("class", "myText")
.attr("x", function(d,i){ return 20 + i*16})
.attr("y", 20);这是您的更新选择：
text.text(function(d) {
return d;
});以下是工作代码：
var svg = d3.select("body").append("svg")
.attr("width",200)
.attr("height", 100);
function update(data) {
var text = svg.selectAll(".myText")
.data(data);
text.exit().remove();
text.enter()
.append("text")
.attr("class", "myText")
.attr("x", function(d,i){ return 20 + i*16})
.attr("y", 20);
text.text(function(d) {
return d;
});
}
setInterval(function() {
var data = [];
for (var i = 0; i < 5; i++) {
data[i] = Math.round(Math.random() * 10);
}
update(data);
}, 2000);<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
PS:我在这里使用的是D3 v3。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39280265
复制相关文章
相似问题
腾讯云开发者
