8

私はツリー構造を構築しています（または、独自のjson内の独自のデータのセットを使用して例の1つを変更しています）、いくつかの機能を作成しようとしています：

私のツリーのレイアウトは、ツリーの例からのものです: http://mbostock.github.com/d3/ex/cluster.html

クリックしたノードの子を折りたたむ onclick イベントを (円に) 追加しています。つまり、ユーザーがノードに関連付けられたスチールブルーの円をクリックすると、そのノードの子が消えます。

ドキュメントを精査しましたが、ノードを折りたたんだり消したりできるようなものは見つかりませんでした。

どうすればよいですか？

4

3 に答える 3

22

これがあります：

http://mbostock.github.com/d3/talk/20111018/tree.html

私のSVGOpen基調講演には、他にもインタラクティブな階層レイアウトの例がいくつかあります。

于 2012-03-03T10:58:45.033 に答える
2

いくつかの方法があります。1 つは、通常のスタイリングを使用して子のマークアップを非表示にする方法です (不透明度: 0、または表示: なし)。ただし、これはデータを非表示にするだけで、ツリーはデータがそこにあるかのようにその形状を維持しますが、見ることはできません。

通常、ツリーにデータが存在しないふりをして、それに応じて更新する必要があります。そのため、上記のリンクの強制指向レイアウトの例と同じアプローチを使用できます。

要約すると、1) 関数を使用して d3 ツリーを構築する 2) 折りたたみ可能なノードにクリック イベントを追加する 3) クリック イベントは、ノードの children プロパティの名前を変更し、1) の関数を呼び出し、それなしでツリーを再描画します。ノードの子。

nkoren の回答 ( http://bl.ocks.org/1062288 ) のリンクからの関連コードは次のとおりです。

function update() { 
    // build the tree layout here
    //  append on("click", click) to the collapsible nodes
}

// Toggle children on click
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update();
}
于 2013-02-15T13:47:42.650 に答える
1

残念ながら、私はまだD3に慣れており、あなたの質問に最もよく答える方法がわかりません。ただし、ノードをクリックして表示/非表示にできる力指向のレイアウトを次に示します。これにより、いくつかのアイデアが得られる可能性があります。http: //bl.ocks.org/1062288

于 2012-03-02T23:43:13.250 に答える