textos gráfico usando la fuerza dirigida D3 en lugar de nodos

Question

original: http://mbostock.github.com/d3/ex/force.html

En su ejemplo según se dispone en el enlace de arriba, simplemente estoy tratando de reemplazar los nodos círculo con sus nombres en su lugar. No sé mucho sobre D3 ni js/jquery, pero estoy tratando de entender cómo funciona.

Pude reemplazar los nodos con svg: text pero cuando lo hago, simplemente "generan" donde empiezan y no se animan.

No sé si debería usar grupos aquí. Si lo hago, enséñame cómo.

Hasta ahora, este es mi código modificado:

<div id="chart"> 
</div> 

<script type="text/javascript"> 
<!-- 

var w = 960, 
    h = 500, 
    fill = d3.scale.category20(); 

var vis = d3.select("#chart").append("svg:svg") 
    .attr("width", w) 
    .attr("height", h); 

d3.json("http://fourthdraft.com/ext/dataviz/miserables.json", function(json) { 
    var force = d3.layout.force() 
     .charge(-120) 
     .linkDistance(70) 
     .nodes(json.nodes) 
     .links(json.links) 
     .size([w, h]) 
     .start(); 

    var link = vis.selectAll("line.link") 
     .data(json.links) 
    .enter().append("svg:line") 
     .attr("class", "link") 
     .style("stroke-width", function(d) { return Math.sqrt(d.value); }) 
     .attr("x1", function(d) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { return d.target.x; }) 
     .attr("y2", function(d) { return d.target.y; }); 

    var node = vis.selectAll("circle.node") 
     .data(json.nodes) 
    .enter().append("svg:text") 
     .attr("class", "node") 
     .attr("x", function(d) { return d.x; }) 
     .attr("y", function(d) { return d.y; }) 
     .text(function(d) { return d.name; }) 
     .style("fill", function(d) { return fill(d.group); }) 
     .call(force.drag); 

    node.append("svg:title") 
     .text(function(d) { return d.name; }); 

    force.on("tick", function() { 
    link.attr("x1", function(d) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { return d.target.x; }) 
     .attr("y2", function(d) { return d.target.y; }); 

    node.attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 
    }); 
}); 

//--> 
</script> 

Answer 1

Ver este violín: http://jsfiddle.net/nrabinowitz/QMKm3/6/

El principal problema con el código anterior es que ha cambiado correctamente los cx y cy atributos (que son específicos al elemento svg:circle) a x y y en la parte donde anexó los elementos svg:text, pero no los modificó en el controlador tick, que es donde se produce la actualización del diseño iterativo ns:

force.on("tick", function() { 
    // snip 

    node.attr("x", function(d) { return d.x; }) 
     .attr("y", function(d) { return d.y; }); 
}); 

También debe cambiar la selección, y añadiendo a

var node = vis.selectAll("circle.node") 
    .data(json.nodes) 
.enter().append("svg:text") 

a

var node = vis.selectAll("text.node") 
    .data(json.nodes) 
.enter().append("svg:text") 

A pesar de que no creo que esto hace que cualquier diferencia en el contexto de este código, finalmente lo hará tropezar: en D3, as explained here, generalmente usa el patrón "seleccionar con un selector, agregar nodos que coinciden con este selector, eliminar los nodos adicionales que coinciden con este selector". En su código, el selector y los nodos que agrega no coinciden, que es un problema conceptual, incluso si no tiene ninguna ramificación para su código tal como está escrito. (Debo señalar que todavía encuentro este patrón un poco confuso y extraño. Pero como mínimo, seguirlo hará que tu código sea más legible para otros desarrolladores.)