Question

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

对于一个项目，我使用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()

返回：

<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，整个图像只是路径元素的组合。

如何在没有事先明确定义坐标的情况下在点上绘制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路径元素的坐标

1 个答案: