我一直在尝试了解 exit() 是如何工作的(已经看过 Mike 的解释)，当我尝试下面的程序时，我注意到 exit() > 没有考虑到我已从 dat 中删除了 3 的事实。它只是看到现在少了一个元素，并删除了它附加的最后一个圆圈。
这就是exit()真正的工作原理吗？简单地比较数组中的元素数量并删除最后几个？我认为它会理解它正在处理哪些值。如何编程 exit() 来识别必须删除第三个圆圈而不是第五个圆圈？即:如何让 exit() 识别数组中的值？
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node { cursor: move; fill: #ccc; stroke: #000; stroke-width: 1.5px; }
</style>
<body>
<script src="d3/d3.v3.min.js"></script>
<script>
var dat = [1,2,3,4,5];
var svg = d3.select("body").append("svg").attr("width",1000).attr("height", 1000);
redraw(svg);
dat = [1,2,4,5];
redraw(svg);
function redraw(layer)
{
layer.selectAll("circle").data(dat).exit().remove("circle");
layer.selectAll("circle").data(dat).enter().append("circle")
.attr("class", "node")
.attr("r", function(d) {console.log(d*10);return d*10;})
.attr("cx", function(d) {return d*100;})
.attr("cy", function(d) {return 100;});
}
</script>
</body>
最佳答案
好的，我自己解决了。解决方案是使用 Object Constancy 。您必须指定一个id，这将帮助 D3 记住哪个数据值在哪里。在 data() 调用中添加一个函数，该函数将返回 id。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node { cursor: move; fill: #ccc; stroke: #000; stroke-width: 1.5px; }
</style>
<body>
<script src="d3/d3.v3.min.js"></script>
<script>
var dat = [{id:"a", val: 1}, {id:"b", val: 2}, {id:"c", val: 3}, {id:"d", val: 4}, {id:"e", val: 5}];
var svg = d3.select("body").append("svg").attr("width",1000).attr("height", 1000);
redraw(svg);
dat = [{id:"a", val: 1}, {id:"b", val: 2}, {id:"d", val: 4}, {id:"e", val: 5}];
redraw(svg);
function redraw(layer)
{
layer.selectAll("circle").data(dat, function(d) {return d.id; }).exit().remove("circle");
layer.selectAll("circle").data(dat, function(d) { return d.id; }).enter().append("circle")
.attr("class", "node")
.attr("r", function(d) {return d.val*10;})
.attr("cx", function(d) {return d.val*100;})
.attr("cy", function(d) {return 100;});
}
</script>
</body>
关于javascript - d3.js。如何按值退出()？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26583955/