Question

有很多使用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路径定义字符串添加到{ {1}}这些路径的属性。

我想要的是那些路径定义字符串，但是作为字符串，不触及任何SVG。我想在Raphael中使用这些字符串，以便我可以在不支持的浏览器上绘制路径SVG，因为一个特定的项目需要支持机构客户，因为遗留软件要求和公司政策没有从IE8升级（我知道，我知道......）。

D3显然能够定义这些字符串，但是我看不到一种明显的方法来获取路径定义对象以输出字符串而不链接到DOM SVG元素。

如何在页面上没有任何SVG的情况下获取字符串？

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

Answer 1

建立关联的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-request，d3-dispatch和d3-collection个库。

如何从带有D3的GeoJSON数据集中获取投影路径定义字符串（而不是SVG元素）？

1 个答案: