如何获取d3标签文本的坐标？

Question

我需要每个标签的坐标：http://www.bigcamerabutton.com/bost.ocks.org/mike/uberdata/

我如何获得它们？我想在每个标签旁边放置我的图像图标，但我无法获得正确的x和y坐标。

Answer 1

您可以在节点上使用.getBBox()来获取其边界框的位置和大小。

如果您希望该示例中的每个标签都有一个边界框，则可以执行以下操作：

var labelBBoxes = d3.selectAll('text')[0].map(function(d) {
  return {
    element: d,
    bbox: d.getBBox()
  }
});

这将获取所有文本元素的数组，并将每个元素映射到包含该元素及其边界框的对象。

每个边界框都具有与<rect>元素相同的属性（实际上它是一个rect元素）：x，y，width和{{1} }。

为了让你开始，你可以尝试这样的事情：

height

从那里你可能想要调整位置和旋转等等，但这只是一个开始。