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

【问题标题】：d3 tree layout - force child nodes to use available spaced3 树布局 - 强制子节点使用可用空间
【发布时间】：2013-04-30 15:46:07
【问题描述】：

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

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

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

希望这是可能的！

【问题讨论】：

标签： javascript tree d3.js visualization

【解决方案1】：

您可以在How to get D3.js's tidy tree graph from reducing the lateral distance of siblings as depth increases（这个问题与那个问题有很大的重叠）和https://github.com/mbostock/d3/issues/317 找到一些有用的信息。后者提供了一个 nodeSize 参数，我怀疑它会比任意将节点推到尽可能远的地方提供更好的视觉显示。

【讨论】：

感谢您的指点。我最终修改了方法以接受 nodeSize 作为函数，这意味着我可以根据节点的深度和兄弟节点的数量动态计算大小。完美运行。
很高兴听到。您应该考虑向 d3 项目提交拉取请求以合并您的增强功能。

【解决方案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

【讨论】：