d3.js 提取 SVG 路径元素的坐标

Question

在这个问题上花了很多时间但没有成功之后，我决定 post 我的（第一个！）问题在这里。

对于一个项目，我使用 topojson 绘制了地图的一部分。在我的 SVG 中，我有一些包含一些点的组（我使用 geojson.io 工具放置了这些点）。

地图是这样的：plotted map

代码的结构如下所示：

<svg width='1300' height='900'>
    <g class="gate" id="D5">
        <path d="M645.3426080089994,434.9821086442098m0,4.5a4.5,4.5 0 1,1 0,-9a4.5,4.5 0 1,1 0,9z"></path>
    </g>

    <g class='gate' id='d4'>
        <path d="M605.3552137160441,383.2755208062008m0,4.5a4.5,4.5 0 1,1 0,-9a4.5,4.5 0 1,1 0,9z"></path>
    </g>
</svg>

我想做的是根据某些条件在这些点的确切位置附加一些 SVG。现在虽然我知道如何附加 SVG，但我无法提取地图上点的坐标。我想附加的 SVG 必须放在地图上的点上。但是，例如，当我将一个圆附加到组时，我输入的坐标不是相对于该点的坐标，而是相对于整个 SVG 区域的绝对坐标。圆圈最终位于左上角而不是实际点上。

我试图提取每个点的坐标，以便使用这些数据进行绘图，但我还没有成功。我设法通过使用获得节点：

d3.selectAll('#D5').select('path').node()

哪个returns：

<path d="M605.3552137160441,383.2755208062008m0,4.5a4.5,4.5 0 1,1 0,-9a4.5,4.5 0 1,1 0,9z"></path>

当我查看路径对象内部时，我发现在 __ data__ 元素的深处有一些坐标，但我无法提取这些坐标。

如果我在开始时定义了点的坐标，这个问题就不是问题了。但是由于是topojson，所以整张图片只是path元素的组合。

如何在不事先明确定义坐标的情况下在点上绘制 SVG？如果需要更多信息，请告诉我。

谢谢！

Answer 1

您要查找的是 getBBox() 函数

d3.selectAll('#D5').select('path').node().getBBox()
// { x: 640.8425903320312, y: 430.48211669921875, width: 9, height: 9 }

见https://jsfiddle.net/7zahj9gt/

d3.js 提取 SVG 路径元素的坐标

d3.js extract coordinates of SVG path elements

javascript

d3.js

svg

topojson