Text nicht als Bezeichnung in D3 Force-Layout

Question

Ich versuche, die Knoten in einem D3-Force-Layout Label hinzufügen, aber es scheint ein Problem damit zu sein. Der gesamte Text wird oben auf dem Bildschirm angezeigt und überlappt sich gegenseitig. Hier ist der Code-Schnipsel:

var link = g.append("g") 
    .attr("class", "links") 
    .selectAll("line") 
    .data(graph.links) 
    .enter().append("line"); 

var node = g.append("g") 
    .attr("class", "nodes") 
    .selectAll("circle") 
    .data(graph.nodes) 
    .enter().append("circle") 
    .attr("r", 2.5) 
    .on('click', clicked); 

var text = g.append("g") 
    .attr("class", "labels") 
    .selectAll("text") 
    .data(graph.nodes) 
    .enter().append("text") 
    .attr("dx", 12) 
    .attr("dy", ".35em") 
    .text(function(d) { return d.name }); 

Answer 1

Elemente häufen sich auf der linken oberen Ecke des SVG (das ist der Ursprung) ein Symptom für verschiedene Probleme, darunter:

• NaN für die Positionen
• nicht die Positionen
• Nicht
• Ohne das Element in der tick Funktion
übersetzen der Element-Einstellung

Da Sie eine Kraft gerichtete Tabelle haben, ist der letzte der offensichtliche Grund.

Lösung: Sie müssen die text in Ihre ticked Funktion einfügen.

function ticked() { 
    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; }); 

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