Wie man mehrere Bögen zum Globus hinzufügt

Question

Ich habe einen einfachen d3 v4 Globus und (mit etwas Hilfe von hier) einen Bogen, der am Ende animiert. Ich möchte jetzt mehrere Bögen aus einer JSON-Datei hinzufügen und habe versucht, die Koordinaten zu manipulieren, ohne Erfolg.

Dies ist der Arbeitscode. https://plnkr.co/edit/ZYM5f1KR1FXiTq1y4n1f?p=preview

Ich habe eine data.json-Datei mit Beispiel-JSON-Daten enthalten. Mein Problem ist Laden und Durchlaufen dieser Datei.

d3.json('data.json') 

und dann bin ich verloren.

Answer 1

Firts, lassen Sie uns nisten die beiden d3.json Funktionen:

d3.json("https://rawgit.com/mbostock/topojson/master/examples/world-50m.json", function(error, world) { 
    d3.json("data.json", function(coord){ 
    //code here 
    }); 
}); 

Auf diese Weise haben wir Zugriff auf beide gleichzeitig JSONs.

Da beide source und target Geo-Koordinaten sind, werden wir Ihre JSON ändern:

[{"source":[-74, 40],"destination":[37, 55]}, 
{"source":[20, 50],"destination":[-60, -39]}, 
{"source":[37, 55],"destination":[32, -15]}, 
// 
{"source":[147, -37],"destination":[-80, 37]}] 

Also, jeder source und destination haben die Koordinaten als Array.

Dann in Ihrem Code, fügen wir die Pfade:

var line = svg.selectAll(".paths") 
    .data(coord) 
    .enter() 
    .append("path"); 

Hier ist Ihre Plunker: https://plnkr.co/edit/Ax4Tby47lFlryzVWCHi2?p=preview