D3树布局-强制子节点使用可用空间

d3 tree layout - force child nodes to use available space

本文关键字：空间 子节点 布局 D3      更新时间：2023-09-26

我有一个基于树的布局使用d3，基于这里的可折叠树布局的例子。

正如你在演示中看到的，节点之间的垂直间距对于树中的每个关卡都是恒定的，这意味着节点可以聚集在一起，同时留下大量的空白。

相反，我希望每一层都占据所有可用的垂直空间。例如，具有2个子节点的关卡的节点间隔为0%和100%，而3个子节点的节点间隔为0%、50%和100%。

希望这是可能的!

您可以在https://github.com/mbostock/d3/issues/317上找到一些有用的信息，例如如何通过随着深度的增加减少兄弟姐妹的横向距离来获得D3.js's整洁的树状图(这个问题与那个问题有明显的重叠)。后者提供了一个nodeSize参数，我认为这个参数比任意地将节点推得越远越好，可以提供更好的视觉显示。

您可以修改'function update(source)'，在此函数下添加以下代码:

// Recompute the new height
var levelWidth = [1];
var childCount = function(level, n) {
  if(n.children && n.children.length > 0) {
    if(levelWidth.length <= level + 1) levelWidth.push(0);
    levelWidth[level+1] += n.children.length;
    n.children.forEach(function(d) {
      childCount(level + 1, d);
    });
  }
};
childCount(0, root);  
var newHeight = d3.max(levelWidth) * 40; 
tree = tree.size([newHeight, width]);

详细的问题和答案(Superboggly)参考如下:根据子节点的数量动态调整d3树布局的大小

相关文章：