Отображение текста/метки на узлах, D3.js сила Ориентированный граф

Question

Я не понимаю, как отображать текст на моих узлах я пытался несколько раз, но не работают, пожалуйста, помогите мне решить это

I не знаком с D3.js на всех, но мне нужно, чтобы визуализировать график для моего проекта, и мне нужна эта дополнительная особенность (ярлык дисплея) на узлах

Вот входной файл:

{ 
"nodes":[ 
{"name":"A","group":0}, 
{"name":"B","group":1}, 
{"name":"C","group":2}, 
{"name":"D","group":3}, 
{"name":"E","group":4} 

], 
"links":[ 
{"source":0,"target":1,"value":11}, 
{"source":0,"target":2,"value":11}, 
{"source":1,"target":2,"value":21}, 
{"source":1,"target":3,"value":21}, 
{"source":1,"target":4,"value":21}, 
{"source":2,"target":3,"value":21}, 
{"source":2,"target":4,"value":21}, 
{"source":3,"target":4,"value":11} 
] 
} 

D3.js Код:

<script type="text/javascript"> 
    // use print_graph() method to output graph vertices 
    main_graph(); 

    var width = 700, 
     height = 300; 


    var color = d3.scale.category20(); 

    var force = d3.layout.force() 
     .charge(-120) 

     .linkDistance(150) 
     .size([width, height]); 

    var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .attr("transform", "translate(0,0)"); 

    d3.json("input.json", function(error, graph) { 
     force 
      .nodes(graph.nodes) 
      .links(graph.links) 
      .start(); 

     var link = svg.selectAll(".link") 
      .data(graph.links) 
      .enter().append("line") 
      .attr("class", "link") 
      .style("stroke-width", function(d) { 
       return Math.sqrt(d.value); 
      }); 

     var node = svg.selectAll(".node") 
      .data(graph.nodes) 
      .enter().append("circle") 
      .attr("class", "node") 
      // size of nodes 
      .attr("r", 20) 
      .style("fill", function(d) { 
       return color(d.group); 
      }) 
      .call(force.drag); 



     //I'm stuck here 
     var texts = svg.selectAll("text.label") 
      .data(graph.nodes) 
      .enter().append("text") 
      .attr("class", "label") 
      .attr("fill", "white") 
      .text(function(d) { 
       return d.name; 
      }); 

     /* 
      // 1st trying 
      var text = svg.selectAll("text") 
        .data(graph.node) 
        .enter().append("text") 
        .attr("fill","white") 
         .text(function (d) {return d.name; }); 
     */ 

     // another trying 
     //node.append("text") 
     //.text(function(d) { return d.name; }); 


     node.append("title") 
      .text(function(d) { 
       return d.name; 
      }); 

     force.on("tick", function() { 
      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; 
       }); 
     }); 
    }); 
</script> 

Answer 1

Как вы добавляете text это хорошо, но в вашем force.on("tick", function() {}) обработчика вы не поместите их:

force.on("tick", function() { 
    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; 
    }); 
    texts.attr("x", function(d) { //<-- NEED TO POSITION THESE TOO 
     return d.x; 
    }) 
    .attr("y", function(d) { 
     return d.y; 
    }); 
}); 

Вот ваш код fixed.