javascript - force - d3js charts examples

Añada una etiqueta de texto al nodo d3 en Force directed Graph y resize en hover

Question

Estoy tratando de agregar etiquetas de texto a los nodos en d3 Force Directed Graph, parece que hay un problema. Este es mi Fiddle :

Cuando agrego el nombre del nodo de esta manera:

node.append("text")
    .attr("class", "word")
    .attr("dy", ".35em")
    .text(function(d) {
        console.log(d.name);
        return d.name;
    });

No hay cambios, pero los nombres se están registrando.

Cuando traté de usar el cuadro delimitador , aparecieron las etiquetas de nodo pero los nodos están apilados en la esquina superior izquierda de la caja mientras que los enlaces de nodo están bien. Este fiddle es el resultado de ese esfuerzo que puse. ¿Alguien puede decirme qué soy? estoy haciendo mal?

Answer 1

Está agregando un elemento de texto dentro de un círculo, eso no funcionará. Puede agregar grupos debajo del elemento svg y luego agregar el círculo y un texto en cada grupo:

// Create the groups under svg
var gnodes = svg.selectAll(''g.gnode'')
  .data(graph.nodes)
  .enter()
  .append(''g'')
  .classed(''gnode'', true);

// Add one circle in each group
var node = gnodes.append("circle")
  .attr("class", "node")
  .attr("r", 5)
  .style("fill", function(d) { return color(d.group); })
  .call(force.drag);

// Append the labels to each group
var labels = gnodes.append("text")
  .text(function(d) { return d.name; });

force.on("tick", function() {
  // Update the links
  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; });

  // Translate the groups
  gnodes.attr("transform", function(d) { 
    return ''translate('' + [d.x, d.y] + '')''; 
  });    

});

Un tenedor de tu violín con esta estrategia está here