Добавить текстовую метку в узел d3 в силовом макете

Question

Это мой код, похоже, у вас также может быть полный код на JsFiddle. Я хочу иметь метки на каждом узле, но я не могу. Кстати, этикетки могут быть встроены в круг в console.

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

Вот скрипка: https://jsfiddle.net/gerardofurtado/7pvhxfzg/1/

Прямо сейчас, вы прилагая text элементы к circle элементов. Когда вы пишете:

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

Вы должны иметь в виду, что nodes является:

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

Таким образом, вы добавляя тексты в кругах, и что не работает. Они отображаются на консоли (как <circle><text></text></circle>), но ничего не появится в SVG.

Просто измените на:

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);