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

Question

从http://mbostock.github.com/d3/talk/20111018/tree.html这个例子中，我构建了一个< code>d3树布局，其中根在浏览器窗口的中间(< code>root.x0 = width/2)，节点在向下的方向，而不是面向右边。

是否可以重新调整树的大小，使得树的宽度取决于树的节点数量，如果节点数量较少，则宽度较小，或者如果节点数量较大，则宽度较大？

我还需要知道d3树布局当前如何计算"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）。不要忘记对对角线投影做同样的事情，以确保你的线也翻转。