Dodaj etykietę tekstową do węzła d3 w wymuszonym wykresie siły i zmień rozmiar po najechaniu myszą

Question

Próbuję dodać etykietę tekstową do węzłów w wykresie ukierunkowanym na siłę d3, wydaje się, że istnieje problem. To jest mój Fiddle:

Kiedy dodać nazwę węzła tak:

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

Nie ma jednak zmiana nazwy są coraz zalogowany.

Kiedy próbowałem używać bounding box, pojawiły się etykiety węzłów, ale węzły są ułożone w stos w lewym górnym rogu okna, podczas gdy łącza węzłów są w porządku. To fiddle jest wynikiem tego wysiłku wkładam. Czy ktoś może powiedzieć co robię źle?

Answer 1

Dodajesz element tekstowy do kręgu, który nie zadziała. Możesz dodać grupy pod elementem svg i następnie dołączyć do kręgu i tekst w każdej grupie:

// 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] + ')'; 
    });  

}); 

Widelec Twojego skrzypce z tej strategii jest here