5

D3.js は初めてです。ツリー レイアウトからノードを削除しようとしていますが、その方法が見つかりませんでした。これはサンプル ツリー レイアウトです。
https://dl.dropbox.com/u/7098/tree/dynamic3.html

このように動的に削除したい:
https://dl.dropbox.com/u/7098/tree/aaa.gif

jsonオブジェクトをルート化する操作が必要だと思います...
アイデアがあれば教えてください。

4

2 に答える 2

2

これは明示的なセブの答えになります。クリック ハンドラーを設定する場所に、次のように入力します。

.on("click", function(d) { 
    if (d.parent && d.parent.children){
        console.log('removing ' + d.name);
        var nodeToDelete = _.where(d.parent.children, {name: d.name});
        if (nodeToDelete){
            d.parent.children = _.without(d.parent.children, nodeToDelete[0]);
        }
    }
});

それはあなたが望むものをあなたに与えるはずです。現在変更されているソースデータからツリーを描画するメソッドを必ず呼び出してください。注: _.where と _.without を使用するためにアンダースコア ライブラリを使用していますが、純粋な js または別のライブラリを使用してこれを行うこともできます。一部のチェックは便宜上であり、たとえばルート ノードの削除を防ぐためのものです。

ps 展開/折りたたみの動作を維持したい場合があるため、d3.event.altKey などでノードの削除を指定するための修飾キーをチェックする条件をクリック コールバックに入れます。

于 2013-08-20T01:08:30.130 に答える
0

従う必要がある原則は、d3.js でツリーの子ノードを折りたたむ/展開するで回答されていますか? . この例は、ノードのクリック ハンドラーでツリーを折りたたむ方法を示しています。

レイアウト マネージャーに渡したデータ構造を変更すると、それに応じてツリーが更新されます。上記の例でツリー レイアウトを折りたたむ場合、ノードのchildren属性を削除します。 の値はchildren変数に格納さ_childrenれるため、子を再び元に戻すことができます。詳細については、toggle機能を参照してください。

ノードを削除するには、同じロジックに従いますが、クリック イベントを受け取るノードをその親のリストから削除しますchildren。親を見つけるには、クリック ハンドラーでツリーをたどるか、データ構造に各親への参照を格納します。

于 2012-11-30T08:00:02.697 に答える