Javascript 向d3圆圈添加文本

我正在使用这个例子，我试图在圆圈中添加一些文本

这就是圆的创建和放置方式

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

    nodes.enter().append("circle")
      .attr("class", function (d, i) { return "circle_"+d.sentiment+" circle_"+i})
      .attr("cx", function (d) { return d.x; })
      .attr("cy", function (d) { return d.x; })
      .attr("r", function (d) { return d.radius; })
      .style("fill", function (d, i) { return colors['default']; })
      .on("mouseover", function (d) { showPopover.call(this, d); })
          .on("mouseout", function (d) { removePopovers(this, true); })
          .call(pulse, function(d){ return d.radius+4; }, function(d){return d.radius; });

但我不知道如何在这些圆圈中添加文字

我已经参考并回答了，但没有成功。问题是，在遵循上述答案后，我的圆圈卡在了一条对角线上

---

有人能告诉我怎么做吗？

问题1:

您正在圆dom中生成文本，这是不正确的

171

应该是这样的：

4

如何做到这一点：

nodes.enter().append("circle") //make circle
    //.attr("class", "node")
     .attr("class", function(d) {
      return d.ratingCategory;
    })
    .attr("cx", function(d) {
      return d.x;
    })
    .attr("cy", function(d) {
      return d.y;
    })
    .attr("r", 2)
    .attr("id", function(d){return d.objectName;})
    .on("mouseover", function(d) {
      showPopover.call(this, d);
    })
    .on("mouseout", function(d) {
      removePopovers();
    })
    ;



var text = svg.selectAll("text")
        .data(data).enter().append("text")
     .attr("x", function(d) {
      return d.x;
    })
    .attr("y", function(d) {
      return d.y;
    })
        .attr("dx",12)
        .attr("dy",".35em")
        .text(function(d){
            return d.objectName;
        });

问题2

在勾号函数中，您只更新圆圈而不更新文本，您应该同时更新两个：

     //update circle
     d3.selectAll("circle").each(collide(.2))
       .attr("cx", function (d) { return d.x; })
       .attr("cy", function (d) { return d.y; });
  //update tick 
  d3.selectAll("text").each(collide(.2))
       .attr("x", function (d) { return d.x -20; })
       .attr("y", function (d) { return d.y; });

---

工作代码

另一个靠近@cyril的选项是使用

g

元素，并将圆圈和文本放在里面。这将为您保存双重数据绑定和双重移动更新：

var nodes = svg.selectAll("g")
    .data(data);

var g = nodes.enter().append("g")

g.append("circle")
  .attr("class", function(d) {
    return d.ratingCategory;
  })   
  .attr("r", 2)
  .attr("id", function(d){return d.objectName;})
  .on("mouseover", function(d) {
    showPopover.call(this, d);
  })
  .on("mouseout", function(d) {
    removePopovers();
  });

  g.append("text")
    .attr("dx",12)
    .attr("dy",".35em")
    .text(function(d){
        return d.objectName;
    });

并将勾号函数中的节点位置更新为：

nodes.each(collide(.2))
  .attr("transform", function(d){ //<-- use transform it's not a g
    return "translate(" + d.x + "," + d.y + ")";
  });

节点。每个节点（碰撞（.2））
.attr（“转换”，函数（d）{//肯定比我的好：）非常有意义。如果你能帮我的话，我想再问一个问题。我想在多个地方制作这些气泡，所以我想知道哪些是模块化组件/方法，可以重复使用以再次创建气泡？太好了，它工作得太棒了。如果你能帮我，我想再问一个问题。我想制作t这些气泡分布在多个地方，所以我想知道哪些模块化组件/方法可以重复使用以再次创建气泡？