Inserir texto dentro do círculo no gráfico D3

Question

Jul 19, 2017, 01:52 PM

Inserir texto dentro do círculo no gráfico D3

Quero inserir algum texto dentro do meu círculo, que é plotado no gráfico de bolhas usando D3.js.
Eu sou capaz de desenhar um círculo em svg de acordo com os dados fornecidos, mas enfrentando um problema ao anexar texto a ele.
abaixo está o meu 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>

Alguém pode sugerir qual é o problema com o código acima? obrigado