d3.js: cómo realizar una copia de seguridad del DOM

Question

No estoy seguro de qué aspecto (s) de javascript, DOM o d3.js esto expone mi desconocimiento de: simplemente sé que lo siento ser haciendo una pregunta tan básica como la siguiente. Soy nuevo aqui.

Tengo un JSON como esto:

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

y me gustaría hacer algo que se parece

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

usando d3.js (para hacer frente a lo obvio: que quiero hacer MUCHO más con d3, esto solo captura un problema que tengo).

Después de hacer estallar una etiqueta <ul> en mi html, en algún lugar en una devolución de llamada desde d3.json puedo escribir algo como esto:

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

(!? Aunque esto no se ha probado cómo hacen las personas javascript prueban pequeños trozos de código) . Esto (probablemente) dame

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

pero ahora no puede salir de la etiqueta <a>! No puedo entender qué combinación impía de this y seleccionar padres o qué necesito hacer para virar esa información adicional antes del cierre de la etiqueta del elemento de la lista. ¿Que necesito hacer?

Answer 1

Simple: no ir por la borda con el método de encadenamiento. :)

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

Ahora puede agregar otras cosas a la li. En este caso, puesto que sólo se D3 le permite añadir elementos (en lugar de los nodos de texto en bruto), es probable que desee añadir un lapso para el texto entre paréntesis:

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