文本元素未显示在 SVG 上

Question

我正在尝试使用 D3 制作气泡图并将文本放入气泡内。 我已经检查了很多示例并了解到 HTML DOM 应该看起来像一个围绕圆圈和文本标签的组标签，我相信我在我的 jsfiddle 示例中拥有： https ://jsfiddle.net/q4nszx34/

我试图通过以下方式使文本出现在与气泡相同的区域：

circles.append("text")  
       .attr("dx", -10)
       .attr("dy", ".35em")
       .text(function (d) {
          return d.key;
        })
        .style("stroke", "gray");

但是，文本元素的位置与我的气泡不在同一位置，我不确定如何获取气泡的位置来设置文本的位置。

先感谢您。

Answer 1

在ticked功能中，翻译您的组元素：

circles.attr("transform", function(d){
  return "translate(" + d.x + "," + d.y + ")";
})

这样， <circle>和<text>元素将一起移动。

这是您更新的小提琴： https : //jsfiddle.net/k45oaztv/