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/

文本元素未显示在SVG上

1 个答案: