D3树布局 - 力子节点使用的可用空间

我使用D3基于树的布局的基础上，可折叠树布局例子here。D3树布局 - 力子节点使用的可用空间

正如你可以在演示中看到，节点之间的垂直间距是树中的每个水平不变，这意味着节点可以帮在一起，同时留下了大量的空白。

相反，我想每个级别采取所有可用的垂直空间。例如，具有2个节点的电平将具有在0％和100％间隔的节点，而3个个子节点将在0％，50％和100％隔开。

希望这是可能的！

2013-04-30 Graham

您可能会在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参数，我怀疑它会提供更好的视觉显示效果，而不是随意将节点推得尽可能远。

来源

2013-04-30 16:56:56

感谢您的指点。我结束了修改方法接受'nodeSize'作为函数，这意味着我可以计算出大小动态地取决于该节点的深度和兄弟姐妹的数目。完美的作品。 – Graham 2013-05-06 08:38:20

好听。您应该考虑向d3项目提交拉取请求以结合您的增强功能。 – 2013-05-06 13:37:47

你可以只修改“功能更新（源）”，此功能下添加如下代码：

// 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）： Dynamically resize the d3 tree layout based on number of childnodes

来源

2014-01-26 05:46:22 ZhangCC

D3树布局 - 力子节点使用的可用空间

回答

相关问题