D3ツリー垂直分離

Question

私は、この一つとして、D3ツリーのレイアウトを使用しています：http://mbostock.github.com/d3/talk/20111018/tree.html

私は私のニーズのためにそれを修正していると問題に実行しています。この例でも、ノードが多すぎるとコンパクトになり、読み込みと対話が難しくなるという同じ問題があります。私はそのような間隔を許すためにステージをサイズ変更しながら、ノード間に最小の垂直スペースを定義したいと思っています。

私はそれを動作させるために分離アルゴリズムを変更しようとした：

動作しませんでした

.separation(function (a, b) { 
    return (a.parent == b.parent ? 1 : 2)/a.depth; 
}) 

。また、どの奥行きが最も子供が多いかを計算して、舞台の高さをchildren * spaceBetweenNodesと教えてみました。それは私を近づけましたが、それでもなお正確ではありませんでした。

depthCounts = []; 
nodes.forEach(function(d, i) { 
    d.y = d.depth * 180; 

    if(!depthCounts[d.depth]) 
     depthCounts[d.depth] = 0; 

    if(d.children) 
    { 
     depthCounts[d.depth] += d.children.length; 
    } 
}); 

tree_resize(largest_depth(depthCounts) * spaceBetweenNodes); 

私もそれがy分離、ない葉巻を計算ところ、以下の方法では、あまりにも、ノードのx値を変更しようとしました。私もその変更を投稿しますが、私はコードから削除しました。

nodes.forEach(function(d, i) { 
    d.y = d.depth * 180; 
}); 

ノード間に垂直方向の最小間隔を達成する方法を教えてください。私は非常に感謝します。私はおそらく非常に単純な何かを見逃している。

Answer 1

は、2016年の時点で、私はちょうど

tree.nodeSize([height, width]) 

https://github.com/mbostock/d3/wiki/Tree-Layout#nodeSize

APIリファレンスは少し悪いが、かなりまっすぐ進む作品で使用してこれを達成することができました。 tree.size([height, width])の後に必ず使用してください。そうしないと、再度値を上書きします。複数の基準については

：ここD3 Tree Layout Separation Between Nodes using NodeSize

Answer 2

私はGoogleグループのユーザーの助けを借りてこれを理解することができました。私はその投稿を見つけることができませんでした。このソリューションでは、D3.jsを1つの場所で修正する必要がありますが、これは推奨されませんが、この問題を回避するためには唯一見つかったものです。

ライン5724ごろからか、この方法：d3_layout_treeVisitAfter

変更：

d3_layout_treeVisitAfter(root, function(node) { 
    node.x = (node.x - x0)/(x1 - x0) * size[0]; 
    node.y = node.depth/y1 * size[1]; 
    delete node._tree; 
}); 

へ：elementsizeをし、それをデフォルト：

d3_layout_treeVisitAfter(root, function(node) { 
    // make sure size is null, we will make it null when we create the tree 
    if(size === undefined || size == null) 
    { 
     node.x = (node.x - x0) * elementsize[0]; 
     node.y = node.depth * elementsize[1]; 
    } 
    else 
    { 
     node.x = (node.x - x0)/(x1 - x0) * size[0]; 
     node.y = node.depth/y1 * size[1]; 
    } 
    delete node._tree; 
}); 

は以下と呼ばれる新しい変数を追加にライン5731 tree.size = function(x)と呼ばれる方法があるその下

var hierarchy = d3.layout.hierarchy().sort(null).value(null) 
    , separation = d3_layout_treeSeparation 
    , elementsize = [ 1, 1 ] // Right here 
    , size = [ 1, 1 ]; 

から。その定義の下に以下を追加します。あなたはあなたが提案したオリジナルの修正プログラムは動作しますelementsize ので

よう

var tree = d3.layout.tree() 
      .size(null) 
      .elementsize(50, 240); 

Answer 3

を変更することができますツリーを作成するとき

tree.elementsize = function(x) { 
    if (!arguments.length) return elementsize; 
    elementsize = x; 
    return tree; 
}; 

は最後に、あなただけのあなたが確認する必要がありますキャンバスにすべてを追加した後にd3は、入力、終了、追加などを行うたびにレイアウトを再計算します。すべてを完了したら、d.yを使って深みを修正することができます。

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

Answer 4

私は他の回答には応答しないと思いますが、コメントを追加するには十分な評判がありません。

とにかく、最新のd3.v3.jsファイルを使用している人向けに更新したいと思っています。 （私はこれが新しいバージョンのため、受け入れられた答えのライン参照が私にとって間違っていたからだと思う）

あなたが編集しているd3.layout.tree関数は、行6236と6345の間にある.d3_layout_treeVisitAfterが開始する階層変数は6237行目で宣言されています.tree.elementsizeのビットはまだ立っています。6343行に入れています。

最後に（これはエラーと思われます）：ツリーを作成するときに、大括弧の中の寸法は、通常は「サイズ」で行います。だから、：

var tree = d3.layout.tree() 
     .size(null) 
     .elementsize([50, 240]);