小编J. *_*erg的帖子

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

在这个问题上花了很长时间但没有任何成功之后,我决定在这里发布我的(第一个!)问题。

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

地图如下所示:绘制的地图

代码的结构如下所示:

<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>
Run Code Online (Sandbox Code Playgroud)

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

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

d3.selectAll('#D5').select('path').node()
Run Code Online (Sandbox Code Playgroud)

返回:

<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>
Run Code Online (Sandbox Code Playgroud)

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

如果我在开始时定义了点的坐标,这个问题就不会成为问题。然而,由于这是topojson,整个图像只是路径元素的组合。

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

谢谢!

javascript svg d3.js topojson

3
推荐指数
1
解决办法
3123
查看次数

标签 统计

d3.js ×1

javascript ×1

svg ×1

topojson ×1