Armadillo-Projektion in D3

Question

Ich versuche, die Armadillo-Projektion in d3 (mit dem d3-Projektions-Plugin) zu verwenden, aber meine Karte hat Rendering-Probleme. Die Anzeige ist genau dieselbe wie im folgenden bl.ocks-Projekt: http://bl.ocks.org/mortenjohs/4739921 (wählen Sie Armadillo im Menü). Ich habe auch World-110m.json verwendet.

Es gibt seltsame Linien im Süden der Welt. Ich stelle fest, dass die Karte von Jason Davies keine Rendering-Probleme hat: https://www.jasondavies.com/maps/armadillo/

Wie können wir die Armadillo-Projektion ohne diese Probleme verwenden? Was ist der Unterschied zwischen der Mortenjohs Karte und Jason Davies? Danke für deine Hilfe!

Der für die Anzeige verwendete Code ist das gleiche, als für andere Vorsprünge, das heißt:

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

Sie haben die Kugel Hintergrund als „Beschneidungspfad“ für Ihre Schichten zu verwenden.

Vor der Zugabe Ihrer Schicht versucht so etwas wie:

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

Dann Ihre Schichten wie gewohnt hinzufügen, aber mit einem zusätzlichen Attribute:

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

Projektion, die (meist die unterbrochenen Einsen und Armadillo erfordert Clipping) sind in dem Dokument der d3-geo-projection erwähnt.

Wenn Sie das DOM im svg Element danach ändern, nur darauf achten, dass die defs das erste Kind bleiben.