d3.js: comment parcourir le DOM

Question

Je ne sais pas quel (s) aspect (s) de javascript, le DOM ou d3.js cela expose mon manque de connaissance de: sachez que je suis désolé d'être poser une question aussi fondamentale que la suivante. Je suis nouveau ici.

J'ai un JSON comme ceci:

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

et je voudrais faire quelque chose qui ressemble

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

utilisant d3.js (pour répondre à l'évidence: je veux faire beaucoup plus avec d3, cela capture juste un problème que j'ai).

Après popping une balise <ul> dans mon html, quelque part dans un rappel de d3.json Je peux écrire quelque chose comme ceci:

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

(! Bien que ce soit non testé comment les gens javascript tester petits bouts de code) . Cela (probablement) me donner

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

mais maintenant je ne peux pas sortir de l'étiquette <a>! Je ne peux pas comprendre quelle combinaison impie de this et en sélectionnant les parents ou ce que je dois faire pour virer sur cette information supplémentaire avant la fin de la balise d'article de liste. Qu'est-ce que je dois faire?

Answer 1

Simple: ne passez pas par-dessus bord avec le chaînage de méthode. :)

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; }); 

Maintenant, vous pouvez ajouter d'autres choses à la li. Dans ce cas, étant donné que D3 ne vous permet d'ajouter des éléments (plutôt que des nœuds de texte brut), vous aurez probablement envie d'ajouter une durée pour le texte entre parenthèses:

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