Kreisclip und Projektion mit D3 orthographisch

Question

Ich arbeite an this und ich habe Probleme mit dem Beschneiden der roten Kreiselemente, wie sie auf dem Globus erscheinen, sogar nach dem 90 ° Clip Winkel. Gibt es auch eine Möglichkeit, wie Sie die Projektion auf die roten Kreise anwenden können, so wie es aussieht, als wären sie auf der Oberfläche des Globus relativ zum orthographischen Winkel? Im Moment erscheinen sie nur als 2-D-Kreise relativ zum Bildschirm.

Answer 1

Statt <circle> Elemente verwenden, können Sie GeoJSON Punktgeometrien verwenden:

{type: "Point", coordinates: [λ, φ]} 

Diese können dann über D3 Projektionssystem befestigt werden, abhängig von der clipAngle, die Sie festgelegt haben. So könnten Sie etwas wie:

Beachten Sie, wie der Radius des Punktes über den Pfad für jeden Punkt festgelegt wird. Sie können auch die pointRadius gesetzt eine Funktion sein, so könnte man so etwas tun:

var path = d3.geo.path() 
    .projection(…) 
    .pointRadius(function(d) { return d.radius; }); 

svg.selectAll("path.point") 
    .data(data) 
    .enter().append("path") 
    .datum(function(d) { 
     return {type: "Point", coordinates: [d.Lon, d.Lat], radius: d.Magnitude}; 
    }) 
    .attr("class", "point") 
    .attr("d", path); 

Der zweite Teil Ihrer Frage geht dahin, ob die Kreise wahre geographische Kreise sein kann. d3.geo.circle können geografische Kreis Merkmale erzeugen (wiederum als GeoJSON), die richtig beschnitten werden:

var path = d3.geo.path().projection(…), 
    circle = d3.geo.circle(); 

svg.selectAll("path.point") 
    .data(data) 
    .enter().append("path") 
    .datum(function(d) { 
     return circle 
      .origin([d.Lon, d.Lat]) 
      .angle(d.Magnitude)(); 
    }) 
    .attr("class", "point") 
    .attr("d", path);