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

Answer 2

它正在绘制所有路径。在网页检查器中查看SVG的DOM进行确认。但是，由于填充，您只会看到顶部区域，恰好是较大区域。尝试将.style('fill', 'none')添加到JS中的路径添加中。或CSS中的以下内容

path {
  fill: none
}

Answer 3

如果有人会遇到类似的问题，我创建了一个工具，可以帮助您rewind或reverse geojson

https://observablehq.com/@bumbeishvili/rewind-geojson

您可以仅将其作为摘要运行

<div class="notebook-content">
  
</div>

<script type="module"> 

import notebook from "https://api.observablehq.com/@bumbeishvili/rewind-geojson.js";  //  "download code" url

document.querySelector('.notebook-content').innerHTML =notebook.modules[0].variables
.filter(d=>d)
.map((d,i)=>` <div class=" observable-wrapper div-number-${i}"></div>`)
.join('')
.concat('<div style="display:none" class="hidden"></div>')


import {Inspector, Runtime} from "https://unpkg.com/@observablehq/runtime@3/dist/runtime.js"; 
let i=1;
Runtime.load(notebook, (variable) => { 
if(i==4 ){i++;  return new Inspector(document.querySelector(`.hidden`));}
if(i==13)return;
return new Inspector(document.querySelector(`.observable-wrapper:nth-child(${i++})`));
 }); 


</script>

带有D3的Geojson地图仅在要素集中呈现单个路径

3 个答案: