根据子节点数动态调整d3树布局的大小 [英] Dynamically resize the d3 tree layout based on number of childnodes

问题描述

从此示例
http://mbostock.github.com/d3/talk/ 20111018 / tree.html
我已经创建了一个 d3树布局，其中根位于中间（ root.x0 = width / 2 ），并且节点向下而不是向右。

From this example http://mbostock.github.com/d3/talk/20111018/tree.html I have build a d3 tree layout where the root is in the middle(root.x0 = width/2) in the browser window and the nodes are in the downward direction instead of facing to the right.

重新调整树的大小，使得树的宽度依赖于树的节点数量的
，使得如果节点数量较少，则宽度小于
，否则如果节点数量大于那么width是大的？

Is it possible to re-size the tree, such that the width of the tree is dependent on the number of nodes of the tree such that if number of nodes is less, then width is less or else if number of nodes is greater then width is large ?

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

I also need to know how d3 tree layout currently calculates the "d.x" attribute? How can I manipulate "d.x" attribute to adjust the spacing between the nodes of the d3 tree layout.

推荐答案

所以当你设置树布局的大小时，你所做的就是设置树的布局值x和y值。所以没有理由不能计算你想要的宽度或高度，并在每次更新调用的布局中更改它。

So when you set the "size" of the tree layout all you are doing is setting the value the tree layout will interpolate the x and y values to. So there is no reason you can't compute the width or height you want and change it in the layout on each update call.

我复制了你给的示例 jsFiddle 并将以下内容添加到更新功能：

I copied the example you gave to a jsFiddle and added the following to the update function:

// 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]);

请注意，这是一个非常粗略的计算，并不考虑孩子们在哪里写父母任何 - 但你得到的想法。

Note that this is a pretty rough calculation and does not factor in where the children are w.r.t their parents or anything - but you get the idea.

对于操纵节点的x值，最简单的可能是简单地修改节点后布局做了它的东西。事实上，你可以看到这已经在具有y坐标的示例中完成了：

As for manipulating the x values of the nodes the easiest is probably to simply modify the nodes after the layout has done it's thing. In fact you can see that this is already done in the example with the y coordinate:

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

他这样做，即使子节点被隐藏，给定级别的节点也保持在同一个y位置，否则如果你折叠了所有的孩子，剩余的水平会伸展到占据整个宽度（尝试评论该行，看看当你切换整个级别不可见时会发生什么）。

He does this so that even if children are hidden a given level of nodes stays at the same y position, otherwise if you collapsed all the children the remaining levels would stretch to take up the whole width (try commenting that line out and see what happens as you toggle whole levels invisible).

至于自上而下，我想你几乎可以翻转到任何地方你看到x和y（和x0和y0）。不要忘记对斜投影做同样的事情，以确保你的线条也翻转。

As for going top down I think you can pretty much just flip everywhere you see x and y (and x0 and y0). Don't forget to do the same to the diagonal projection to make sure your lines flip too.

这篇关于根据子节点数动态调整d3树布局的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！