将退出过渡添加到基于 D3 圆形包的可重用模块

Adding on-exit transition to D3 circle pack-based reusable module

本文关键字：模块 D3 退出 添加      更新时间：2023-09-26

我有一个基于d3.layout.pack图形示例的可重用模块。

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

基本上，为了模拟数据更新，我以这种方式调用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 行找到退出转换处理。

你能检查一下有什么问题吗？

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

"修复"此问题的方法是明确告诉 D3 您希望如何匹配数据 - 例如，通过将第 424 行更改为

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

这将比较name以确定数据元素是否由 DOM 元素表示。在这里修改了jsfiddle。

相关文章：