Hinzufügen von Text-Label zu D3-Knoten in Kraft gerichtetes Diagramm und Größe ändern bei Hover

Question

Ich versuche, Text-Label zu Knoten in d3 Force Directed Graph hinzuzufügen, scheint ein Problem zu sein. Das ist mein Fiddle:

Wenn ich den Knotennamen wie folgt hinzu:

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

Es gibt keine Veränderung, aber die Namen angemeldet sind immer.

Als ich versuchte, bounding box zu verwenden, erschien die Knotenbeschriftungen, aber die Knoten sind auf der oberen linken Ecke des Kastens gestapelt, während die Knotenverbindungen in Ordnung sind. Diese ist das Ergebnis dieser Anstrengung, die ich reingelegt habe Was mache ich falsch?

Answer 1

Sie fügen ein Textelement in einen Kreis ein, der nicht funktioniert. Sie können Gruppen unter dem svg Element hinzufügen und dann den Kreis anhängen und einen Text in jeder Gruppe:

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

}); 

Eine Gabel Ihrer Geige mit dieser Strategie ist here