d3js v3：クリック時のノードの選択

Question

D3がどのようにノードで動作するのか分かりません。

私は、JSONファイル（階層的な配列）をロードしています：

d3.json('readme.json', function(error, data){ 
    nodes = tree.nodes(data); 

をそして私はSVGコンテナにグループ（およびrectsおよびその他のSVGオブジェクト）を追加しています：

var gNodes = svgContainer 
    .selectAll(".node") 
    .data(nodes) 
    .enter() 
     .append("g") 
     .attr("transform", "translate("+2000+","+0+")") 
     .on("click", toggle); 

何私は今、ノード（rect svgオブジェクトを介して表示されているサイズを持つ）をクリックしてノードの子を隠していますが、それを動作させることはできませんでした。

ノード上のクリックを経由して使用されている

function toggle(d) 

（上記var gNodesを参照してください）：

私は機能トグルを持っています。

私はd.childrenを使用できますし、デバッガを介して彼は正しいノードを見つけることができます。

しかし、どうやってsvgContainerのノードや矩形などを削除できますか？それはこのように動作しません。

d.children.exit().remove(); 

私はこの.exit().remove()が選択に働くだろうとd.childrenを選択（それはそれの内部データである？）ではないと思います。

しかし、D3を使用してツリー内のノードの子を削除する方法が必要です。どうやってやるの？

Answer 1

2つのことは：

1. あなたは正しいです：dはここではない選択に、データムを参照する（ともないDOM要素に）
2. exit()
にはデータムを持たないDOM要素に依存します。ここの要素にはすべてデータがあります。したがって、 remove()だけを使用してください。

実行コードを投稿していないので、この例では答えはMike Bostockです。

選択をフィルタリングすることで、そのデータに基づいてDOM要素を選択できます。 D3 v4のでは、node選択自体をフィルタリングし、（childrenのみ直接の子孫を取得します）ノードのすべての子孫を取得するためにnode.descendants()を使用して、要素を削除することができます。

node.on("click", function(d) { 
    node.filter(function(e) { 
     return d.descendants().splice(1).indexOf(e) > -1 
    }).remove(); 
}) 

はここにありますノードをクリックしてください：https://bl.ocks.org/anonymous/269149545ba97c2c0b20c1c2ea0a91d8/72df7ad28935168f07cc33a92f31752849779378

PS：リンクだけでなくノードだけを削除しています。

PPS：は、とは異なります。とは異なります。あなたは、DOM要素で何をしたいのかを決める必要があります。