根据子节点的数量动态调整d3树布局的大小

Question

从这个例子 http://mbostock.github.com/d3/talk/20111018/tree.html 我已经构建了一个d3 tree layout根root.x0 = width/2位于浏览器窗口中间()的位置,节点处于向下而不是面向在右边.

是否可以重新调整树的大小,使树的宽度取决于树的节点数,这样如果节点数较少,则宽度较小,否则如果节点数大于宽度很大？

我还需要知道d3 tree layout当前如何计算" d.x"属性？如何操作" d.x"属性来调整d3树布局节点之间的间距.

Answer 1

因此,当您设置树布局的"大小"时,您所做的就是设置树布局将x和y值插值的值.因此,没有理由无法计算所需的宽度或高度,并在每次更新调用的布局中更改它.

我将您给出的示例复制到jsFiddle并将以下内容添加到更新函数中:

// compute 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) * 20; // 20 pixels per line  
tree = tree.size([newHeight, w]);

请注意,这是一个非常粗略的计算,并不考虑孩子与父母或其他任何事情的关系 - 但你明白了.

至于操作节点的x值,最简单的可能是在布局完成之后简单地修改节点.实际上你可以看到这已经在y坐标的例子中完成了:

// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; }); 

他这样做是为了即使孩子被隐藏,给定级别的节点也会保持在同一个y位置,否则如果你折叠了所有孩子,剩下的水平会拉伸以占据整个宽度(尝试评论那条线并看看会发生什么当你切换整个级别不可见时).

至于自上而下我觉得你几乎可以在你看到x和y(以及x0和y0)的任何地方翻转.不要忘记对对角线投影做同样的事情,以确保你的线条也能翻转.