D3世界-50m.json投影填充不正確

Question

我有一個world-50m.json文件工作的投影，但是當我用一種顏色填充它時，有幾個國家的邊緣被切斷，這些國家會在邊緣創建水平填充部分/線條整個地圖。

這是對D3-地理例如投影這裏實際可見：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，由於路徑和投影的不匹配D3 v3和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"); 
};