D3折叠集群布局

D3 collapsing cluster layout

本文关键字：布局 折叠 D3      更新时间：2023-09-26

我正在处理大型数据集，并使用D3的（径向）聚类树状图来显示数据，

http://bl.ocks.org/mbostock/4339607

我正试图在d3集群类上实现一种形式的可折叠性，就像在这里的树类中看到的那样

http://bl.ocks.org/mbostock/4339083

然而，我需要图形有一个恒定的大小。更具体地说，半径不能改变，因此最小图将是两个节点（一个在中间节点，一个在叶节点）。然后单击内部节点将用叶节点填充图的边缘，并更新所有现有的内部节点和链接。

我一直试图破解树类中的d3更新函数，但我运气不好。有人能够解决（或规避）这个问题吗？

我没有附加到集群布局，但我确实需要有恒定的大小（这是我发现的唯一支持这一点的D3布局）。

我已经混合了这两种布局。这将首先折叠所有节点：

function collapse(d) {
    if (d.children) {
        d._children = d.children;
        d._children.forEach(collapse);
        d.children = null;
    }
}
data.children.forEach(collapse);
update(data);//this will draw all the nodes and links

点击功能：

// Toggle children on click.
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(data);
}

此处为完整代码。

相关文章：