¿Cómo colocar texto en el círculo cuando se usa el diseño de fuerza D3.js?

Question

Dec 18, 2013, 04:33 PM

¿Cómo colocar texto en el círculo cuando se usa el diseño de fuerza D3.js?

<!DOCTYPE html>
<html>
<meta charset="utf-8">

<style>

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

</style>
<body>
</body>
<script src="d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

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

d3.json("data.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")
      .attr("r", function(d) {return d.r;})
      .style("fill", function(d) { return color(d.group); })

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

  node.append("text")
       .text("A");

  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>
</html>

El código de arriba está usando D3js para dibujar un dibujo de un gráfico dirigido por la Fuerza a partir de algunos datos, y solo quiero colocar un texto en el círculo, así que uso node.append ("texto") puedes verlo arriba.

Pero sin embargo, cuando lo agrega, no funciona, todavía no hay texto en el círculo, así que me pregunto, ¿cómo podría ser?