2016-07-13 8 views
0

と幅木を固定http://bl.ocks.org/mbostock/1093025D3.jsはd3.js例から限られたインデント

私は、ツリーの幅を指定するtree.sizeを使用したいが、私はあまりにも大きな子供のデフォルトのインデントを見つけます。ドキュメントで述べたように、[tree.nodeSizeを使用するとtree.sizeの効果がキャンセルされます] [1]: "nodeSizeプロパティはtree.sizeと排他的です; tree.nodeSizeを設定するとtree.sizeはnullに設定されます。

var tree = d3.layout.tree() 
//.nodeSize([1, 20]); 
.size([10, 300]); 

私は明確にするためのカスタムjsfiddle作成:あなたが最初の子が右側に道であることがわかりますhttp://jsfiddle.net/orrw9p1k/1/

を。左側の最大値から約20ピクセルになるようにしたいと思いますが、 'analytics'ノードを配備する場合でもツリーがその幅を超えて大きくならないようにしたいと思います。

両方の世界で最高の方法はありますか?

UPDATE:ここでは、実施例である:私が正しくあなたの質問を理解すると仮定すると、 http://jsfiddle.net/mneom9bf/

答えて

1

、あなたはあなたのノードのそれぞれについて、「正規深さ」によって、これを達成することができます。

nodes.forEach(function(d) { d.y = d.depth * 100; }); 

ちょうどあなたのコメント// Compute the "layout"の近くにこれを追加し、あなたが望む方法を取得するには値100で遊びます。

編集:あなたもvar widthであなたの木のサイズを設定し、全体的な木の大きさに依存させるために{ d.y = d.depth * width/someNumber; }{ d.y = d.depth * 100; }を変更することができ