D3 world-50m.json 投影填充不正确

Question

我有一个 world-50m.json 文件的投影，但是当我用一种颜色填充它时，有几个国家在边缘被切断，从而在整个区域创建水平填充 sections/lines地图.

这实际上在此处的 d3-geo 示例投影中可见：https://github.com/d3/d3-geo/blob/master/test/data/world-50m.json

是否还有另一个 JSON 文件没有这些截止国家/地区？或者我可以从我的填充中省略特定的多边形？不太确定我如何找到每个 country/shape 的问题。虽然大多数都很小，如果省略也不会错过，但主要的似乎是俄罗斯。

这是我的代码供参考：

var w = 960,
    h = 660,
    active = d3.select(null);

var projection = d3.geoMercator()
    .scale(150)
    .translate([w/2, h/2])
    .precision(.1);

var path = d3.geo.path()
    .projection(projection);

var countries = svg.append("svg:g").attr("id", "countries");

d3.json("world-50m.json", function(error, us) {
  mapFeatures = topojson.feature(us, us.objects.countries).features;
  mapFeatures.type = "countries";
  drawMap();
});

function drawMap() {
  countries.selectAll("path")
        .data(mapFeatures)
        .enter().append("svg:path")
        .attr("d", path)
        .attr("class", "feature")
        .attr("data-id", function(d) { return d.id; })
        .style("fill", "blue")
        .style("stroke", "white")
        .style("stroke-width", ".2px");
};

如有任何帮助，我们将不胜感激！

Answer 1

这个解决方案在上面的评论中有详细说明，是在@Andrew Reid 和@altocumulus 的帮助下实现的。

观察到的问题是 Antimeridian Cutting 实例，由于 d3 v3 和 d3 v4 语法之间的路径和投影调用不匹配，d3 未正确处理该实例。

问题已通过将 geo.path() 更改为 geoPath() 解决，这更正了不匹配并使 d3 能够使用其反子午线切割支持正确渲染地图。

下面是正确的代码：

var w = 960,
    h = 660,
    active = d3.select(null);

var projection = d3.geoMercator()
    .scale(150)
    .translate([w/2, h/2])
    .precision(.1);

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

var countries = svg.append("svg:g").attr("id", "countries");

d3.json("world-50m.json", function(error, us) {
  mapFeatures = topojson.feature(us, us.objects.countries).features;
  mapFeatures.type = "countries";
  drawMap();
});

function drawMap() {
  countries.selectAll("path")
        .data(mapFeatures)
        .enter().append("svg:path")
        .attr("d", path)
        .attr("class", "feature")
        .attr("data-id", function(d) { return d.id; })
        .style("fill", "blue")
        .style("stroke", "white")
        .style("stroke-width", ".2px");
};

D3 world-50m.json 投影填充不正确

D3 world-50m.json projection filling incorrectly

javascript

json

map-projections

d3.js