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

Question

我有一个使用 d3 的基于树的布局，基于此处的可折叠树布局示例。

正如您在演示中看到的那样，树中每个级别的节点之间的垂直间距是恒定的，这意味着节点可以聚集在一起，同时留下大量空白。

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

希望这是可能的！

Answer 1

您可以在How to get D3.js's tidy tree graph from 随着深度增加时减少兄弟姐妹的横向距离（这个问题与那个问题有很大重叠）和https://github.com/mbostock/d3/中找到一些有用的信息问题/317。后者提供了一个 nodeSize 参数，我怀疑它会比任意地将节点推到尽可能远的地方提供更好的视觉显示。

Answer 2

您可以只修改'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]);

详细问题和答案请参考this like (Superboggly)： Dynamically resize the d3 tree layout based on number of childnodes