3

実はこのツリーについていくつか質問がありますが、個別に質問します。

私はツリー ( demo/code ) を持っています。これは明らかに、大部分がストック d3 水平ツリーであり、子ノードにアタッチしている小さなツールチップを除いて保存します。

問題は、y 軸の中央から放射状に広がるのではなく、コンテナの左上からツリーを拡張するにはどうすればよいかということです。言い換えれば、私はこれで終わりたいです：

START-----Parent 1-----Child 1
                  \
                   `---Child 2

など、START は SVG コンテナーの左上にあります。注: したがって、子ノードは下方向および右方向に展開する必要があります。

ここで x と y がどのように機能しているかを調べてきましたが、これを変更する方法がわかりません。

4

2 に答える 2

2

で x 値を変更することにより、その効果を実現できます。

nodes.forEach(function(d) { d.x = /*yourValues*/; d.y = d.depth * 180; });

おそらく多くのことを認識していたように、特定の問題の真の鍵は、各ノードにそのレベルのノード数 (つまり兄弟) に関連する値を提供することです。提供した例ではすでにdepth各ノードに値が与えられているため、常にノードを反復処理してそれらの値を集計し、最終的に次のような配列を生成できます。

node0 has 0 nodes before it in the same depth (depth 0)
node1 has 0 nodes before it in the same depth (depth 1)
node2 has 1 nodes before it in the same depth (depth 1)

更新forEach上記のコードを次のコードに置き換えることで、兄弟の値を見つけて目的の効果を得ることができます。

nodes.forEach(function(d) { //iterate through the nodes
    if(d.parent != null){ //if the node has a parent
        for(var i = 0; i < d.parent.children.length; i++){ //check parent children
            if(d.parent.children[i].name == d.name){ //find current node
                d.downset = i; //index is how far node must be moved down
            }
        }
        d.parentDownset = d.parent.downset; //must also account for parent downset
    }
    if(d.downset == null){ d.downset = 0; }
    if(d.parentDownset == null){ d.parentDownset = 0; }
    d.x = (d.downset * 40) + (d.parentDownset * 40) + 20;
    d.y = d.depth * 180;
});

さらに、あなたの例で子供が命名されている方法では、.

から を1取り出し、それ以外の場合はと をChild 1.1返す0Child 1Child 2

nodes.forEach(function(d,i) {
                              d.x = d.numberAfterPeriod * 40 + 20;
                              d.y = d.depth * 180;
                            });
于 2013-10-03T17:05:33.683 に答える