带有D3的Geojson地图仅在要素集中呈现单个路径 [英] Geojson map with D3 only rendering a single path in a feature collection

问题描述

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

I'm trying to draw a geojson map of some regions of Colombia. Currently it only shows a single path:,

我的要素集合有52个要素，但是我只能绘制一个要素.我不知道自己在做什么错，我的代码基于其他教程.如何显示所有路径?

My feature collection has 52 features, but I can only draw this one feature. I do not know what I'm doing wrong, I'm based my code on other tutorials. How can I do to show all the paths?

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

推荐答案

问题

所有要素都在绘制中，您正确使用了路径并输入循环.要查看，请将您的填充设置为无:

All your features are drawing, you are correctly using your path and enter cycle. To see, set your fill to none:

检查svg时可以看到它们:所有路径都在那里.

You can see them when inspecting the svg: all the paths are there.

当它们填满后，为什么不在地图上看到它们?因为多边形是倒置的，所以除了感兴趣的区域外，它们覆盖了整个世界.尽管其他大多数地理图书馆/渲染器都将geojson视为笛卡尔，但D3却没有.这意味着缠绕顺序很重要.您的座标顺序错误.

Why don't you see them in the map when they have fill? Because the the polygons are inverted, they cover the entire world except for the region of interest. While most other geographic libraries/renderers treat geojson as Cartesian, D3 does not. This means winding order matters. Your coordinates are wound in the wrong order.

解决方案

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

To properly fill, draw all features, and support mouse interaction, you'll need to reverse the winding order of the polygons. You can do this on the fly, or create new geojson files to store the pre-reversed data.

为此，让我们看一下您的数据.您仅使用的是MultiPolygons要素，让我们看一下结构:

To do so let's take a look at your data. You are working with only features that are MultiPolygons, let's look at the structure:

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

坐标的结构如下:

 coordinates:[polygons] // an array of polygons

各个多边形的结构如下:

The individual polygons are structured as so:

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

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

Polygon rings are structured as an array of long lats, with the first and last values being the same.

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

因此，要反转坐标的顺序，我们需要反转环阵列中的项:

So, to reverse the ordering of the coordinates, we need to reverse the items in the ring arrays:

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

如果混合中也有多边形(嵌套略少)，则可以使用:

If we had polygons in the mix too (they are slightly less nested), we could use:

 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();
     })  
   }
 })

这是更新的朋克车

这篇关于带有D3的Geojson地图仅在要素集中呈现单个路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！