11

次のような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);

また、分離をx計算する以下の方法でもノードの値を変更しようとしましたが、葉巻は変更しませんでした。y私もその変更を投稿しますが、コードから削除しました。

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

ノード間の垂直方向の最小間隔を達成する方法を提案したり、知っている場合は、投稿してください。とても感謝しています。私はおそらく非常に単純なものが欠けています。

4

4 に答える 4

6

2016年の時点で、私はこれを

tree.nodeSize([height, width])

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

APIリファレンスは少し貧弱ですが、かなり簡単に機能します。必ず後で使用してtree.size([height, width])ください。そうしないと、値が再度上書きされます。

詳細情報：NodeSizeを使用したノード間のD3ツリーレイアウトの分離

于 2016-01-28T10:53:07.667 に答える
4

私は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;
});

に：

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;
});

以下に：という新しい変数を追加し、elementsizeデフォルトで[ 1, 1 ]行5731に設定します。

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

その下に。と呼ばれるメソッドがありtree.size = function(x)ます。その定義の下に以下を追加します。

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

最後に、ツリーを作成するときに、次のelementsizeように変更できます。

var tree = d3.layout.tree()
             .size(null)
             .elementsize(50, 240);
于 2013-02-06T08:10:18.487 に答える
3

他の回答に返信することは想定されていませんが、コメントを追加するのに十分な評判がありません。

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

編集中のd3.layout.tree関数は、6236行目と6345行目の間にあります。d3_layout_treeVisitAfterは6318行目から始まります。階層変数は6237行目で宣言されています。tree.elementsizeに関するビットはまだ立っています-6343行目に配置します。

最後に（これはエラーだったと思います）：ツリーを作成するときは、通常の「サイズ」の場合と同様に、寸法を角かっこで囲みます。それで：

var tree = d3.layout.tree()
         .size(null)
         .elementsize([50, 240]);
于 2013-09-12T10:34:50.667 に答える
1

提案した元の修正は機能します。キャンバスにすべてを追加した後で必ず修正する必要があります。d3は、入力、終了、追加などを行うたびにレイアウトを再計算します。これらすべてを実行したら、dyをいじって深さを修正できます。

nodes.forEach(function(d) { d.y = d.depth * fixdepth});
于 2013-06-01T04:42:04.833 に答える