javascript - D3.js 错误绘制geojson

Question

我正在尝试想象俄罗斯地区。我从here获取数据，验证here一切都很好 - picture .

但是当我尝试绘制它时，我只收到一个大的黑色矩形。

var width = 700, height = 400;

var svg = d3.select(".graph").append("svg")
        .attr("viewBox", "0 0 " + (width) + " " + (height))
        .style("max-width", "700px")
        .style("margin", "10px auto");


d3.json("83.json", function (error, mapData) {
    var features = mapData.features;

    var path = d3.geoPath().projection(d3.geoMercator());

    svg.append("g")
            .attr("class", "region")
            .selectAll("path")
            .data(features)
            .enter()
            .append("path")
            .attr("d", path)
});

示例 - http://ustnv.ru/d3/index.htmlGeojson 文件 - http://ustnv.ru/d3/83.json

Answer 1

问题在于坐标的缠绕顺序(请参阅 this block )。大多数工具/实用程序/库/验证器并不真正关心缠绕顺序，因为它们将 geoJSON 视为包含笛卡尔坐标。 D3 则不然 - D3 使用椭球体数学 - 这样做的好处是能够轻松穿过反子午线并能够选择倒置的多边形。

使用椭球坐标的后果是错误的缠绕顺序将创建地球上所有不是您目标的特征(倒置多边形)。您的多边形实际上包含两种缠绕顺序的组合。您可以通过检查 svg 路径来看到这一点:

这里一条路径似乎是准确绘制的，而它上面的另一条路径覆盖了整个星球 - 除了它应该占据的部分(它应该占据的空间被覆盖整个世界的其他路径覆盖) 。

这个问题很容易修复 - 您只需要重新排序坐标 - 但由于您拥有在同一集合中包含两个绕组的功能，因此使用 turf.js 等库会更容易。创建一系列新的正确缠绕特征:

    var fixed = features.map(function(feature) {
        return turf.rewind(feature,{reverse:true});
    })

注意反向缠绕顺序 - 通过一个奇怪的怪癖，D3，它可能是最广泛的平台，其中缠绕顺序很重要，实际上并不遵循关于缠绕顺序的 geoJSON 规范(RFC 7946)，它使用相反的缠绕顺序，请参阅 Mike Bostock 的评论:

I’m disappointed that RFC 7946 standardizes the opposite winding order to D3, Shapefiles and PostGIS. And I don’t see an easy way for D3 to change its behavior, since it would break all existing (spherical) GeoJSON used by D3. (source)

通过倒回每个多边形，我们得到了一个稍微更有用的 map :

有所改进，但这些投影设置的功能有点小。

通过添加 fitSize 方法来缩放和平移，我们可以获得更好看的 map (请参阅 block here ):