Hinzufügen von Text-Label zu D3-Knoten in Force-Layout

Question

Das ist mein Code aussehen, Sie können auch vollständigen Code auf JsFiddle haben. Ich möchte Etiketten auf jedem Knoten haben, aber ich kann nicht. Übrigens, Etiketten können in den Kreis im console eingebettet werden. Hier

var nodes = svg.selectAll("circle") 
        .data(dataset.nodes) 
        .enter() 
        .append("circle") 
        .attr("r", 10) 
        .style("fill", function(d, i){ 
         return colors(i); 
        }) 
        .call(force.drag); 
    var label = nodes.append("svg:text") 
        .text(function (d) { return d.name; }) 
        .style("text-anchor", "middle") 
        .style("fill", "#555") 
        .style("font-family", "Arial") 
        .style("font-size", 12); 



    force.on("tick", function(){ 
     edges.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; }); 
     nodes.attr("cx", function(d){ return d.x; }) 
      .attr("cy", function(d){ return d.y; }); 
     label.attr("x", function(d){ return d.x; }) 
      .attr("y", function (d) {return d.y - 10; }); 


    }); 

Answer 1

ist die Geige: https://jsfiddle.net/gerardofurtado/7pvhxfzg/1/

Gerade jetzt, Sie sind Anfügen die text Elemente an die circle Elemente. Wenn Sie schreiben:

var label = nodes.append("svg:text") 

Sie haben im Auge zu behalten, was nodes ist:

var nodes = svg.selectAll("circle") 
        .data(dataset.nodes) 
        .enter() 
        .append("circle") 

So Sie die Texte zu Kreisen anhängen, und das funktioniert nicht. Sie erscheinen an der Konsole (wie <circle><text></text></circle>), aber nichts wird in der SVG angezeigt.

Ändern Sie einfach auf:

var label = svg.selectAll(".mytext") 
        .data(dataset.nodes) 
        .enter() 
        .append("text") 
        .text(function (d) { return d.name; }) 
        .style("text-anchor", "middle") 
        .style("fill", "#555") 
        .style("font-family", "Arial") 
        .style("font-size", 12);