javascript - 将文本添加到 d3 圆圈

Question

我正在使用这个例子 http://bl.ocks.org/danielatkin/57ea2f55b79ae686dfc7我正在尝试在圆圈中添加一些文字。

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

    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; });

但我不知道如何向这些圈子添加文字。

我已经提交了this和 this回答但无法成功。问题是，按照上述答案后，我的圆圈卡在了对 Angular 线上。

有人能告诉我怎么做吗？

Answer 1

另一个接近@cyril 的选项是使用g 元素并将圆和文本都放在里面。这为您节省了双重数据绑定(bind)和双重移动更新:

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;
    });

并将节点在tick函数中的位置更新为:

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

---

已更新 block .