Plot GeoJSON-Linie Zeichenfolge auf Leinwand mit D3-Projektion

Question

Ich versuche, eine Zeile auf einem Globus mit D3 erstellt plotten, aber irgendwie zeigt es sich falsch.

Demo

Hier ist, wie der Vorsprung und Pfad eingerichtet sind

var projection = d3.geo.orthographic() 
    .translate([width/2, height/2]) 
    .scale(scale) 
    .clipAngle(90); 

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

Dann ist es zeichne ich nur auf die Leinwand (mit der Bahnfunktion)

// the route 
    context.fillStyle = '#000'; 
    context.strokeStyle = '#000'; 
    context.beginPath(); 
    path(route); 
    context.fill(); 

Die route Variable ist ein GeoJSONn Zeilenfolge, ich kann die Route auf der Broschüre Karte und alles wor plot ks wie erwartet, aber wenn ich versuche, es auf den Globus zu zeichnen, erscheint es einfach falsch.

Ich denke, es hat etwas mit Projektionen zu tun, aber ich weiß nicht, was das verursacht. Hat jemand eine Idee, wie ich es korrigieren kann?

Answer 1

Statt Ihren Weg auf die Leinwand gezeichnet von Füllung, müssen Sie nur streicheln:

// the route 
    context.fillStyle = '#000'; 
    context.strokeStyle = '#000'; 
    context.beginPath(); 
    path(route); 
    context.stroke(); // Just stroke the path 
    //context.fill(); // You don't want to fill the path 

Dies wird nur die Linie zeichnen, wie erwartet. Schau dir das an Plunk.

Answer 2

Alternativ, wenn Sie füllen müssen angeben, setzen Sie es einfach auf die Hintergrundfarbe (hier die #ccc ist)

// the route 
context.fillStyle = '#ccc'; 
context.strokeStyle = '#000'; 
context.beginPath(); 
path(route); 
context.fill(); 
context.stroke();