Clip circolare e proiezione con ortografia D3

Question

Sto lavorando su this e ho problemi a tagliare gli elementi del cerchio rosso come appaiono sul globo anche oltre l'angolo di 90 °. Inoltre, c'è un modo per applicare la proiezione ai cerchi rossi, in quanto sembra che siano sulla superficie del globo rispetto all'angolo ortografico? Al momento appaiono semplicemente come cerchi 2d rispetto allo schermo.

Answer 1

Invece di usare <circle> elementi, è possibile utilizzare le geometrie punto di GeoJSON:

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

Questi possono poi essere tagliati attraverso il sistema di proiezione di D3, a seconda del clipAngle che hai impostato. Quindi potresti avere qualcosa di simile:

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

data.forEach(function(d) { 
    svg.append("path") 
     .datum({type: "Point", coordinates: [d.Lon, d.Lat]}) 
     .attr("d", path.pointRadius(d.Magnitude)); 
}); 

Nota come il raggio del punto viene impostato tramite il percorso per ogni punto. È anche possibile impostare il pointRadius ad essere una funzione, così si potrebbe fare qualcosa di simile:

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

La seconda parte della tua domanda chiede se i cerchi possono essere veri circoli geografiche. d3.geo.circle in grado di generare le caratteristiche geografiche cerchio (di nuovo, come GeoJSON), che sarà adeguatamente ritagliata:

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