使用 D3 的 Geojson 地图仅渲染要素集合中的单个路径

Question

我正在尝试绘制哥伦比亚某些地区的 geojson 地图。目前它只显示一个路径：，

我的特征集合有 52 个特征，但我只能绘制这一个特征。我不知道我做错了什么，我的代码基于其他教程。我该怎么做才能显示所有路径？

var features = mapData.features;
console.log(features);
// Update color scale domain based on data
// Draw each province as a path
 mapLayer.selectAll('path')
  .data(features)
 .enter().append('path')
  .attr('d', path)
  .attr('vector-effect', 'non-scaling-stroke')

这是我的完整代码：

https://plnkr.co/edit/kSDtyyoWr9TSEDZ5Letv?p=preview

Answer 1

问题

您的所有功能都在绘制，您正在正确使用您的路径并进入循环。要查看，请将填充设置为无：

您可以在检查 svg 时看到它们：所有路径都在那里。

当他们填满时，你为什么不在地图上看到他们？因为多边形是倒置的，所以它们覆盖了整个世界，除了感兴趣的区域。虽然大多数其他地理库/渲染器将 geojson 视为笛卡尔，但 D3 没有。这意味着绕线顺序很重要。您的坐标以错误的顺序缠绕。

解决方案

要正确填充、绘制所有要素并支持鼠标交互，您需要反转多边形的缠绕顺序。您可以即时执行此操作，也可以创建新的 geojson 文件来存储预反转数据。

为此，让我们来看看您的数据。您仅使用 MultiPolygons 的功能，让我们看一下结构：

{ 
  type:"Feature",
  properties: {...},
  geometry: {
    type: "MultiPolygon",
    coordinate: /* coordinates here */
  }
}

坐标的结构如下：

 coordinates:[polygons] // an array of polygons

各个多边形的结构如下：

 [outer ring][inner ring][inner ring]... // an array of coordinates for an outer ring, an array of coordinates for each hole (inner ring).

多边形环被构造为一个长纬度数组，第一个和最后一个值相同。

[x,y],[x,y]....

因此，要反转坐标的顺序，我们需要反转环形数组中的项目：

 features.forEach(function(feature) {
   if(feature.geometry.type == "MultiPolygon") {
     feature.geometry.coordinates.forEach(function(polygon) {
       polygon.forEach(function(ring) {
         ring.reverse(); 
       })
     })
   }
 })

如果我们在混合中也有多边形（它们的嵌套稍微少一些），我们可以使用：

 features.forEach(function(feature) {
   if(feature.geometry.type == "MultiPolygon") {
     feature.geometry.coordinates.forEach(function(polygon) {

       polygon.forEach(function(ring) {
         ring.reverse();
       })
     })
   }
   else if (feature.geometry.type == "Polygon") {
     feature.geometry.coordinates.forEach(function(ring) {
       ring.reverse();
     })  
   }
 })

这是一个更新的plunker