d3.js：selection.on

Question

を使用して展開し、リストを作成するすなわち、私は

私はをクリックし、

<ul> 
    <li> foo </li> 
    <li> bar </li> 
</ul> 

のようなリストを作成したいと思い

[ 
    {"name":"foo", "links":["a", "b", "c"]}, 
    {"name":"bar", "links":["d", "e", "f"]} 
] 

のようなデータ構造を持っていますon fooは、次のように展開します

<ul> 
    <li> foo 
     <ul> 
      <li> a </li> 
      <li> b </li> 
      <li> c </li> 
     </ul> 
    </li> 
    <li> bar </li> 
</ul> 

私はこれをd3.jsを使用して行いたいとします。

items = toplist.append("ul") 
    .selectAll("li") 
    .data(function(d){return d.links}) 
    .enter() 
    .append("li") 
     .text(function(d){return d}) 

私は

toplist.selectAll("li") 
    .data(data) 
    .enter() 
    .append("li") 
     .text(function(d){return d.name;}) 
     .on("click", expand) 

のように、 toplistの各 liに on("click"..を追加することができます。

toplist = d3.select("body").append("ul"); 
toplist.selectAll("li") 
    .data(data) 
    .enter() 
    .append("li") 
     .text(function(d){return d.name;}) 

それはサブリストを追加することさえ簡単です：それは、上のリストを作るのは簡単で楽しいです

を呼び出し、サブリストコードをexpandという関数に移動します。それは

function expand(d,i){ 

のように見えますし、それに上記items = ...コードを持っています。

これは、fooとbarの両方を同時に展開するという問題があります。

fooリスト要素にクリックイベントを別々にしてbarという要素を展開するにはどうすればよいですか？基本的には、私はexpandのデータ要素のインデックスを渡す必要があり、DOMのその特定の部分に対してのみ動作させる必要があります。

助けていただけたら幸いです！

Answer 1

expandが呼び出されたときに必要なものがすべてあります。 thisコンテキストは、クリックされたli要素であり、dが関連付けられたデータです。あなただけ（むしろ拡大と崩壊の間にトグルより）拡張したい場合は、この選択してサブリストを作成することができます。また、クリックした項目からクリックハンドラを削除し

function expand(d) { 
    d3.select(this) 
     .on("click", null) 
    .append("ul") 
    .selectAll("li") 
     .data(d.links) 
    .enter().append("li") 
     .text(function(d) { return d; }); 
} 

注expandことを。 2回クリックするとリストを再度追加する必要はありません。

展開と削除を切り替える場合は、サブメニューが開いているか閉じているかによって、状態を追跡する必要があります。 d（たとえばd.open）にブール値を格納することでこれを行うこともできますし、DOMを照会してサブメニューが既に存在するかどうか確認することもできます。d3.select(this).select("ul").empty()

これを行うには、事前にすべてのサブメニューを作成してから、表示タイプをdisplayスタイルプロパティで切り替えるだけです。利用可能なすべてのデータがある場合は、これが最も簡単なオプションです。リンクデータを非同期にロードしていた場合は、おそらくサブメニューを動的に作成するだけで構いません。

ライブ例：http://bl.ocks.org/1541816