javascript - 将退出转换添加到基于 D3 圆包的可重用模块

Question

我有一个 reusable module基于 d3.layout.pack graph example .

我在节点元素上添加了退出时的转换，但似乎该转换仅适用于一个数据集，而不适用于另一个数据集。

基本上，为了模拟数据更新，我用 setInterval 这样调用一个函数:

 function test(){
     d3.select('#vis')
     .datum(data2)
     .call(cluster);
 }

 setInterval(test, 1500);

...我以这种方式添加了过渡:

 c.exit().transition()
     .duration(700)
     .attr("r", function(d){ return 0; })
     .remove();

您可以在文件底部找到数据更新部分，并在第 431 行找到退出转换处理。

你能检查一下哪里出了问题吗？

Answer 1

您看到的行为是由 D3 中的数据匹配方式引起的。对于其中一个数据集，所有数据元素都与现有 DOM 元素匹配，因此 exit 选择为空——您只是更新现有元素的位置、尺寸等。

“修复”这个问题的方法是明确告诉 D3 您希望如何匹配数据——例如，将第 424 行更改为

.data(nodes, function(d) { return d.name; });

它将比较 name 以确定数据元素是否由 DOM 元素表示。修改后的 jsfiddle here .