d3.js: come risalire il DOM

Question

Non sono abbastanza sicuro di quale aspetto (s) di javascript, DOM o d3.js questo espone la mia mancanza di conoscenza di: basta sapere che mi dispiace essere ponendo una domanda così fondamentale come la seguente. Sono nuovo qui.

Ho un JSON come questo:

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

e mi piacerebbe fare qualcosa che assomiglia

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

utilizzando d3.js (per affrontare l'ovvio: che voglio fare MOLTO di più con d3, questo cattura solo un problema che ho).

Dopo popping un tag <ul> nel mio html, da qualche parte in una richiamata da d3.json posso scrivere qualcosa di simile:

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

(!? Anche se questo non è testato come la gente javascript testare piccoli frammenti di codice) . Questo sarà (probabilmente) darmi

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

ma ora non può uscire di tag <a>! Non riesco a capire quale combinazione empia di this e selezionare i genitori o cosa non devo fare per virare su quella informazione extra prima della chiusura del tag dell'elemento della lista. Cosa devo fare?

Answer 1

Semplice: non esagerare con il metodo di concatenamento. :)

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

Ora è possibile aggiungere altre cose al li. In questo caso, poiché D3 consente solo di aggiungere elementi (invece che i nodi di testo prime), probabilmente si vorrà aggiungere un arco per il testo parentesi:

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