d3.js - 向 D3 生成的圆圈添加标签

Question

我刚开始学习d3，我做的第一件事就是这个有点蹩脚的小提琴

现在我想知道我应该如何在这些圆圈上贴上标签。是否可以将标签（比如说当前半径值）嵌套在一个圆圈中，以便它始终随圆圈移动，或者您必须将标签视为独立对象并相应地管理所有内容？

Answer 1

您可以使用分组元素 ( <g>) 来保存圆圈和关联的文本标签，以便它们始终在一起。translate然后，您可以使用属性上的命令来定位输入组transform（而不是像现在这样直接定位圆）。

所以基本上，您将数据绑定到<g>元素，而不是<circle>像现在这样绑定到元素。然后你可以将一个“圆圈”和一个“文本”附加到“g”（无数据连接），这两个子元素将自动继承数据本身。