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

Javascript d3树布局-强制子节点使用可用空间,javascript,tree,d3.js,visualization,Javascript,Tree,D3.js,Visualization,我有一个使用d3的基于树的布局,基于可折叠树布局示例 正如您在演示中所看到的,对于树中的每个级别,节点之间的垂直间距都是恒定的,这意味着节点可以聚集在一起,同时留下大量空白 相反,我希望每一层占据所有可用的垂直空间。例如,具有2个子节点的标高的节点间距为0%和100%,而3个子节点的间距为0%、50%和100% 希望这是可能的 您可以在(这个问题与那个问题有很大的重叠)和中找到一些有用的信息。后者提供了一个nodeSize参数,我怀疑它将提供比任意将节点推到尽可能远的位置更好的视觉显示。您可以修

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

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

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


希望这是可能的

您可以在(这个问题与那个问题有很大的重叠)和中找到一些有用的信息。后者提供了一个nodeSize参数,我怀疑它将提供比任意将节点推到尽可能远的位置更好的视觉显示。

您可以修改“函数更新(源)”,在该函数下添加以下代码:

// 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]);
//重新计算新高度
var levelWidth=[1];
var childCount=函数(级别,n){
如果(n.children&&n.children.length>0){

如果我的意思是我可以根据节点的深度和兄弟的数量动态地计算大小。很好地听到。你应该考虑向D3项目提交一个拉取请求来合并你的增强。