d3.js - 如何使用 D3 从 GeoJSON 数据集中获取投影路径定义字符串(不是 SVG 元素)?

标签 d3.js geospatial geojson topojson

有很多使用 D3 的路径投影工具从 D3 地理数据绘制 SVG 路径的示例。例如,here's one I wrote earlier (D3 v3),这里是 recent example using D3 v4

它们看起来都是这样的:

  svg.append("path")
      .data(topojson.feature(datafile, datafile.objects.featureOfInterest))
      .attr("class", "land")
      .attr("d", pathDefinitionObject);

...读取数据文件并将其与某些 SVG 相关联,创建链接的空路径,然后与特定投影相关联的 D3 路径定义对象查看数据并使用它将 SVG 路径定义字符串添加到 d这些路径的属性。

我想要的是那些路径定义字符串,但作为字符串,不涉及任何 SVG。我想将这些字符串与 Raphael 一起使用,以便我可以在不支持的浏览器上绘制路径SVG,因为某个特定项目需要支持机构客户,这些客户由于遗留软件要求和公司政策尚未从 IE8 升级(我知道,我知道...)。

D3 显然能够定义这些字符串,但我看不到一种明显的方法可以让路径定义对象在不链接到 DOM SVG 元素的情况下输出字符串。

我怎样才能在页面上没有任何 SVG 的情况下只获取字符串?


我正在尝试为此使用最小的 D3 v4's "microlibraries" 集,因此对于具有最少 D3 依赖性的答案加分(特别是如果它可以避免相当大的 D3-selection.js - 理想情况下我想对于这个项目,只使用 D3 的数据处理,根本不使用它的 DOM 操作。

最佳答案

构建您的链接 v4 示例,仅获取陆地路径 d 属性的极简代码将是:

<!DOCTYPE html>
<meta charset="utf-8">

<script src="//d3js.org/d3-array.v1.min.js"></script>
<script src="//d3js.org/d3-geo.v1.min.js"></script>
<script src="//d3js.org/d3-request.v1.min.js"></script>
<script src="//d3js.org/d3-dispatch.v1.min.js"></script>
<script src="//d3js.org/d3-collection.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>

<script>

var projection = d3.geoAlbers()
    .scale(1280)
    .translate([500, 500]);

var path = d3.geoPath()
    .projection(projection)
    .pointRadius(1.5);

d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json", function(error, us){
  if (error) throw error;

  var topo = topojson.feature(us, us.objects.land);
  console.log(path(topo));

});

</script>

如果您不使用d3.json,您可以删除d3-requestd3-dispatchd3-集合库。

关于d3.js - 如何使用 D3 从 GeoJSON 数据集中获取投影路径定义字符串(不是 SVG 元素)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38611939/

相关文章:

javascript - if 语句未进入 for 循环

javascript - 如何从 D3.js 中的 csv 文件创建嵌套对象数组?

javascript - D3.js 具有相同刻度位置的多个 y 轴?

javascript - 如何过渡路径的线性渐变

MongoDB 地理相交无法找到大多边形

leaflet - 消除重复的多边形州/国家/地区共享边界

javascript - 获取数组中的所有元素?

javascript - 具有奇数个顶点的 D3.js 树,未显示边

python - 如何根据 GeoJSON 文件在 map 上绘制两点之间的道路?

r - 使用 gbuffer 缓冲 R 中的(地理)空间点