28

この例 http://mbostock.github.com/d3/talk/20111018/tree.htmld3 tree layoutから、ブラウザ ウィンドウでルートが middle( root.x0 = width/2) にあり、ノードが下向きになっている場所 をビルドしました。右の方へ。

ツリーの幅がツリーのノード数に依存するようにツリーのサイズを変更することは可能ですか?ノード数が少ない場合は幅が小さくなり、ノード数が幅よりも大きい場合は幅が小さくなります。は大きい ？

また、現在「 」属性をどのようにd3 tree layout計算しているかを知る必要がありますか? " " 属性を操作して、d3 ツリー レイアウトのノード間の間隔を調整するにはd.xどうすればよいですか。d.x

4

1 に答える 1

46

したがって、ツリー レイアウトの「サイズ」を設定するときは、ツリー レイアウトが 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) が表示されている場所ならどこでも反転できると思います。対角投影にも同じことを行って、線が反転することを忘れないでください。

于 2013-01-03T18:55:51.030 に答える