Question

我正在尝试将文本动态添加到我的圈子中，但看不到任何内容。有人可以告诉我我在做什么错吗？

这是我的代码：

data = [{"name":"Shanghai", "size":32},
       {"name":"Guangzhou", "size":57},
       {"name":"Dongguan", "size": 112},
       {"name":"Cairo", "size": 293},
       {"name":"Saint Petersburg", "size": 575},
       {"name":"New Taipei", "size": 1050},
       {"name":"Beijing", "size": 2100}];


var svg = d3.select("svg");

var myColor = d3.scale.category10();

var text = svg.append("text")
.attr('x', 10)
.attr('y', 20)
.text('click a circle');

var circle = svg.selectAll("circle")
.data(data);

circle.style("fill", "black");

circle.attr("r", function(d) { return Math.sqrt(d.size); });

circle.attr("cx", function(d, i) { return i * 100 + 30; });

var circleEnter = circle.enter().append("circle");

circleEnter.attr("cy", 60);
circleEnter.attr("cx", function(d, i) { return i * 100 + 70; });
circleEnter.attr("r", function(d) { return Math.sqrt(d.size); });
circleEnter.attr("fill", function(d,i) { return myColor(i); } );

circle.attr("class", function(d,i) {
      if (i == 0) {return "circle1"}
      if (i == 1) {return "circle2"}
      if (i == 2) {return "circle3"}
      if (i == 3) {return "circle4"}
      if (i == 4) {return "circle5"}
      if (i == 5) {return "circle6"}
      if (i == 6) {return "circle7"}
      })

这是无效的代码：

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

我尝试了几种不同的策略，但无济于事。我想我一定是在忽略一些东西。

尝试在D3中动态添加文本

0 个答案: