用d3更新圆不会移动位置吗？
用d3更新圆不会移动位置吗？
提问于 2018-08-06 15:16:55
我试着学习一些例子，但有些东西并不像预期的那样工作:所有的位置都应该更新，但只有新添加的点才会移动。知道我错过了什么吗？
https://jsfiddle.net/zahachtah/g8jL0fk2/2/
<!DOCTYPE html>
<html>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="chart"></div>
<script>
var svgCont = d3.select("#chart").append("svg")
.attr("width", 600)
.attr("height", 600);
var data=[]
for(var i=0; i<10; i++) {
data.push([(Math.random()*10-5),(Math.random()*10-5)])
}
function update(data) {
var circles = svgCont.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function (d) { return d[0]*5+150; }) //return Math.rand()*20+300;
.attr("cy", function (d) { return d[1]*5+150; })
.attr("r",3)
.style("fill", "green");
circles.transition()
.duration(500)
.attr("cx", function (d) { return d[0]*5+150+(Math.random()*10-5); }) //return Math.rand()*20+300;
.attr("cy", function (d) { return d[1]*5+150+(Math.random()*10-5); })
.attr("r",3)
.style("fill", "red");
circles.exit().remove();
};
update(data)
d3.interval(function() {
data.push([Math.random()*10-5,Math.random()*10-5])
for(var i=0; i<10; i++) {
data[i][0]=data[i][0]+(Math.random()*10-5)
data[i][1]=data[i][1]+(Math.random()*10-5)
}
update(data)
//console.log(data[0])
}, 1500);
</script>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-06 16:24:34
您需要稍微修改一下更新函数
function update(data) {
var circles = svgCont.selectAll("circle")
.data(data);
circles.enter()
.append("circle")
.attr("cx", function(d) {
return d[0] * 5 + 150;
}) //return Math.rand()*20+300;
.attr("cy", function(d) {
return d[1] * 5 + 150;
})
.attr("r", 3)
.style("fill", "green")
.merge(circles).transition()
.duration(500)
.attr("cx", function(d) {
return d[0] * 5 + 150 + (Math.random() * 10 - 5);
}) //return Math.rand()*20+300;
.attr("cy", function(d) {
return d[1] * 5 + 150 + (Math.random() * 10 - 5);
})
.attr("r", 3)
.style("fill", "red");
circles.exit().remove();
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51702385
复制相关文章
相似问题
腾讯云开发者
