如何在不将其添加到 DOM 的情况下获取 TopoJSON 功能的 SVG 路径数据？

Question

我有一个特殊情况，我不想将生成的 topojson 文件路径添加到 DOM，而是只获取生成的 d 属性（SVG 路径） .

所以我经常这样做：

let features = feature(landmass, landmass.objects.land).features

        let projection = d3.geoAzimuthalEqualArea()
            .center([180, -180])
            .fitSize([width, height], { type: "FeatureCollection", features: features })

        let path = d3.geoPath().projection(projection)

        g.selectAll("#landmass")
            .data(features)
            .enter().append("path")
            .attr("id", "landmass")
            .attr("d", path);

但我实际上只想将 features 转换为使用所选 geoPath 的路径，而不向 DOM 添加任何 svg 对象。

我怎样才能做到这一点？

Answer 1

D3 关于地理的文档 path generators 你了解了吗（强调我的）：

The geographic path generator, d3.geoPath, is similar to the shape generators in d3-shape: given a GeoJSON geometry or feature object, it generates an SVG path data string or renders the path to a Canvas.

您可以将 GeoJSON 特征传递给路径生成器，并让它创建 路径数据——即路径命令——然后分配给 <path> 元素的 d 属性。这基本上就是 coding

时发生的情况

.data(features)
// ... enter, append, etc...
.attr("d", path);

这条语句可以改写为：

.data(features)
// ... enter, append, etc...
.attr("d", d => path(d));

或者，更明确地说：

.data(features)
// ... enter, append, etc...
.attr("d", feature => path(feature));

查看后一个代码片段可以清楚地看到，D3 通过其数据绑定方式为每个特征创建一个 <path> 元素并传递该特征，即绑定 <path> 的数据元素，到路径生成器 path 以创建 d 属性的路径命令字符串。

有了这些知识，您可以轻松地为所有功能创建路径数据字符串，而无需创建任何 DOM 个节点：

const pathData = features.map(feature => path(feature));

更简洁，你可以将生成器函数传递给 .map():

const pathData = features.map(path);

如何在不将其添加到 DOM 的情况下获取 TopoJSON 功能的 SVG 路径数据？

How to get SVG path data of TopoJSON feature without adding it to the DOM?

javascript

svg

geojson

d3.js

topojson