我正在尝试绘制哥伦比亚某些地区的geojson map 。目前，它仅显示一条路径:
我的要素集合具有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
最佳答案
问题
您所有的特征都在绘制中，您正确使用了路径并输入了循环。要查看，请将填充设置为无:
检查svg时可以看到它们:所有路径都在那里。
填满后，为什么在 map 上看不到它们？因为多边形是倒置的，所以除了感兴趣的区域外，它们覆盖了整个世界。虽然其他大多数地理图书馆/渲染器都将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