在D3图表中的圆圈内插入文本

Question

I want to insert some text inside my Circle which is plot in bubble chart using D3.js. 我想在我的Circle中插入一些文本，这是使用D3.js在气泡图中绘制的。
I am able to draw circle in svg as per the data provided to it, but facing a problem while append text to it. 我可以根据提供给它的数据在svg中绘制圆圈，但在向其附加文本时遇到问题。
below is my code: 下面是我的代码：

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

Can anyone suggest what is the problem with above code? 任何人都可以建议上面的代码有什么问题？ Thanks 谢谢

Answer 1

When you do this: 当你这样做：

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

You are selecting <text> elements that already exist in that SVG (in your case, the axes' ticks). 您正在选择该SVG中已存在的<text>元素（在您的情况下，轴的刻度）。 Because of that, your "enter" selection is empty. 因此，您的“输入”选择为空。

Solution: select something that doesn't exist, like null : 解决方案：选择不存在的内容，例如null ：

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

Here is the updated code: 这是更新的代码：

 var sampleData = [{ "x": 8, "y": 1 }, { "x": 2, "y": 1 }, { "x": 4, "y": 1 }, { "x": 5, "y": 1 }]; var vis = d3.select("svg"); var xRange = d3.scale.linear().range([40, 400]).domain([0, 10]); var yRange = d3.scale.linear().range([200, 40]).domain([0, 2]); 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() .append("circle") .attr("cx", function(d) { return xRange(dx); }) //.attr("cy", function(d) { return yRange (dy); }) .attr("cy", function(d) { return yRange(dy); }) .attr("r", function(d) { return Math.log(dx) * 30; }) .attr("stroke", "black") .style("fill", "yellow"); var text = vis.selectAll(null) .data(sampleData) .enter() .append("text"); var textLabels = text .attr("x", function(d) { return xRange(dx); }) .attr("text-anchor", "middle") .attr("y", function(d) { return yRange(dy); }) .text(function(d) { return "( " + dx + ", " + dy + " )"; }) .attr("font-family", "sans-serif") .attr("font-size", "10px") .attr("fill", "red");

 line, path{ fill: none; stroke: black; }

 <script src="https://d3js.org/d3.v3.min.js"></script> <svg width="400" height="220"></svg>

PS: Don't use insert , use append instead. PS：不要使用insert ，请改用append 。

Answer 2

A better way of doing this is to use svg groups, then you can position both the circles and the text together: 更好的方法是使用svg组，然后你可以将圆圈和文本放在一起：

var join = vis.selectAll(".points").data(sampleData);

var groups = join
  .enter()
  .append("g")
  .attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")"; });
  .attr("cx", function(d) { return xRange (d.x); })

groups.append("circle")
  .attr("r", function(d) { return Math.log(d.x) * 30; })
  .attr("stroke","black")
  .style("fill", "yellow");

groups.append("text")
      .data(sampleData)
      .text( function (d) { return "( " + d.cx + ", " + d.cy +" )"; })
      .attr("font-family", "sans-serif")
      .attr("font-size", "20px")
      .attr("fill", "red");

在D3图表中的圆圈内插入文本

问题描述

2 个解决方案

解决方案1
3 已采纳 2017-07-19 12:10:32

解决方案2
0 2017-07-19 12:19:07

在D3图表中的圆圈内插入文本

问题描述

2 个解决方案

解决方案1 3 已采纳 2017-07-19 12:10:32

解决方案2 0 2017-07-19 12:19:07

解决方案1
3 已采纳 2017-07-19 12:10:32

解决方案2
0 2017-07-19 12:19:07