0

折りたたみ可能なツリー レイアウトの例hereに基づいて、d3 を使用したツリー ベースのレイアウトがあります。

デモでわかるように、ノード間の垂直方向の間隔はツリーの各レベルで一定です。つまり、多くの余白を残しながらノードを束ねることができます。

代わりに、各レベルが使用可能なすべての垂直方向のスペースを占めるようにしたいと考えています。たとえば、2 つの子ノードを持つレベルではノードの間隔が 0% と 100% になり、3 つの子ノードの間隔は 0%、50%、100% になります。

うまくいけば、これは可能です！

4

2 に答える 2

0

「関数 update(source)」を変更するだけで、この関数の下に次のコードを追加できます。

// 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): 子ノードの数に基づいて d3 ツリー レイアウトを動的にサイズ変更します

于 2014-01-26T05:46:22.603 に答える