Question

我一直试图了解exit()的工作原理（已经看过迈克的解释），当我尝试下面的程序时，我注意到exit()没有采取考虑到我已从3移除dat这一事实。它只是看到现在有一个元素减少，并删除它附加的最后一个圆圈。

这是exit()的真正意义吗？简单地比较数组中的元素数量并删除最后几个元素？我认为它了解它正在处理哪些价值观。 exit()如何编程以识别必须删除第三个圆而不是第五个圆？ ie：如何让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>

Answer 1

好的，我自己解决了。解决方案是使用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>

d3.js.如何按值退出（）？

1 个答案: