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

Question

我有一个 world-50m.json 文件的投影工作，但是当我用颜色填充它时，有几个国家在边缘被切断，从而在整个地图上创建水平填充部分/线。

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

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

这是我的参考代码：

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

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

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

通过将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");
};