d3.js：DOMをトラバースする方法

Question

javascriptのどのアスペクト（DOMまたはd3.js）が私の知識が不足しているかはわかりません：ごめんなさい次のような基本的な質問をする。私はここで新しいです。

私はこのようなJSONがあります。

[{"link":"a", "count": 3}, {"link":"b", "count": 4}, {"link":"c", "count": 2}] 

を、私は明らかに対処するために（d3.jsを使用して

<ul> 
    <li> <a>a</a> (3)</li> 
    <li> <a>b</a> (4)</li> 
    <li> <a>c</a> (2)</li> 
</ul> 

のように見える何かをしたいのですが：私がやりたいですd3でさらに多くの場合、これは私が持っている問題をキャプチャします）。

d3.jsonからのコールバックのどこかに、私のhtmlで<ul>タグをポップした後、私はこのような何かを書くことができます：

d3.select("ul") 
    .selectAll("li") 
    .data(json) 
    .enter() 
    .append("li") 
    .append("a") 
    .text(function(d){return d.link}) 

（！？これは未検証ですがjavascriptの人々は、コードの少しスクラップをテスト行う方法） 。これは、（おそらく）私

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

を与えるだろうが、今、私は<a>タグから抜け出すことができません！私はthisの不敬な組み合わせと、リスト項目タグを閉じる前にその余分な情報を取り除くために必要な親やその他のものを選択することを理解できません。私は何をする必要がありますか？

Answer 1

シンプル：メソッドチェインで外に出てはいけません。 :)

var ul = d3.select("ul"); 

var li = ul.selectAll("li") 
    .data(json) 
    .enter().append("li"); 

var a = li.append("a") 
    .text(function(d) { return d.link; }); 

これで、liに他のものを追加できます。 D3は唯一あなたが要素（というよりも、生のテキストノード）を追加することができますので、この場合、あなたはおそらく、カッコ内のテキストのスパンを追加したいと思う：

li.append("span") 
    .text(function(d) { return " (" + d.count + ")"; });