Insertar texto dentro del círculo en el gráfico D3

Question

Jul 19, 2017, 01:52 PM

Insertar texto dentro del círculo en el gráfico D3

Quiero insertar algo de texto dentro de mi círculo que se traza en un gráfico de burbujas usando D3.js.
Puedo dibujar un círculo en svg según los datos que se le proporcionaron, pero enfrento un problema al agregarle texto.
a continuación está mi código:

<script type="text/javascript">
var sampleData = [{"x": 8,"y": 1}, {"x": 2,"y": 1}, {"x": 4,"y": 1},{"x": 5,"y": 1}];
 // {"x": 6,"y": 40}, {"x": 8,"y": 100}, {"x": 10,"y": 60}];

$(function() {
  InitChart();
});
function InitChart() {
  // Chart creation code goes here
  var vis = d3.select("#svgVisualize");
  var xRange = d3.scale.linear().range([40, 400]).domain([0,10]);
  var yRange = d3.scale.linear().range([200, 40]).domain([0,2]);
  /* var xRange = d3.scale.linear().range([40, 400]).domain([d3.min(sampleData, function(d) {
      return (d.x);
  }), d3.max(sampleData, function(d) {
    return d.x;
  })]);
  var yRange = d3.scale.linear().range([400, 40]).domain([d3.min(sampleData, function(d) {
      return d.y;
  }), d3.max(sampleData, function(d) {
    return d.y;
  })]); */
  var xAxis = d3.svg.axis().scale(xRange).ticks(2);
  var yAxis = d3.svg.axis().scale(yRange).ticks(2).orient("left");
  vis.append("svg:g").call(xAxis).attr("transform", "translate(0,200)");
  vis.append("svg:g").call(yAxis).attr("transform", "translate(40,0)");

  var circles = vis.selectAll("circle").data(sampleData);

  circles
      .enter()
      .insert("circle")
      .attr("cx", function(d) { return xRange (d.x); })
      //.attr("cy", function(d) { return yRange (d.y); })
      .attr("cy", function(d) { return yRange (d.y); })
      .attr("r", function(d) { return Math.log(d.x) * 30; })
      .attr("stroke","black")
      .style("fill", "yellow");

  var text = vis.selectAll("text")
                          .data(sampleData)
                          .enter()
                          .insert("text");

  //Add SVG Text Element Attributes
  var textLabels = text
                   .attr("x", function(d) { return d.cx; })
                   .attr("y", function(d) { return d.cy; })
                   .text( function (d) { return "( " + d.cx + ", " + d.cy +" )"; })
                   .attr("font-family", "sans-serif")
                   .attr("font-size", "20px")
                   .attr("fill", "red");

}
</script>

<body>
<svg id="svgVisualize" width="500" height="250" style="border:1px solid Red;"></svg>
</body>

¿Alguien puede sugerir cuál es el problema con el código anterior? Gracias