根据子节点的数量动态调整 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.

是否可以重新调整树的大小，使得树的宽度是相关的在树的节点数上，如果节点数较少，则宽度较小否则，如果节点数大于宽度，则宽度很大?

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 tree layout 当前如何计算d.x"属性?如何操作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屋！