javascript - D3 world-50m.json 投影填充错误

Question

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

这实际上在 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

该解决方案在上面的评论中有详细介绍，是在 @Andrew Reid 和 @altocumulus 的帮助下实现的。

观察到的问题是一个反子午线切割实例，由于 d3 v3 和 d3 v4 语法之间的路径和投影调用不匹配，d3 没有正确处理该实例。

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

下面是正确的代码:

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