D3中的犰狳投影

Question

我想在d3中使用犰狳投影（使用d3投影插件），但是我的地圖存在渲染問題。該顯示與在以下bl.ocks項目中完全相同：http://bl.ocks.org/mortenjohs/4739921（在菜單中選擇Armadillo）。我也使用了世界110m.json。

有怪異線南地球。我注意到Jason Davies的地圖沒有這樣的渲染問題：https://www.jasondavies.com/maps/armadillo/

我們如何使用沒有這些問題的犰狳投影？ mortenjohs地圖和Jason Davie's有什麼區別？謝謝你的幫助！

用於顯示的代碼比其他預測的一樣，那就是：

var projection = d3.geoArmadillo(); 

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

d3.json("/d/4090846/world-110m.json", function(error, world) { 
    svg.insert("path", ".graticule") 
     .datum(topojson.object(world, world.objects.land)) 
     .attr("class", "land") 
     .attr("d", path); 

    svg.insert("path", ".graticule") 
     .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a.id !== b.id; })) 
     .attr("class", "boundary") 
     .attr("d", path); 

Answer 1

你必須使用球背景爲「剪輯路徑」爲您層。

之前將您的層嘗試類似：

defs = svg.append("defs"); 

    defs.append("path") 
     .datum({type: "Sphere"}) 
     .attr("id", "sphere") 
     .attr("d", path); 

    defs.append("clipPath") 
     .attr("id", "clip") 
     .append("use") 
     .attr("xlink:href", "#sphere"); 

然後添加圖層像往常一樣，但有一個附加屬性：

 .attr("clip-path", "url(#clip)"); 

投影需要削波（主要是中斷的那些和犰狳）在d3-geo-projection的文檔中提及。

如果在此之後修改了svg元素中的DOM，請注意defs保留第一個孩子。