Klip koła i rzut z ortografią D3

Question

Pracuję nad this i mam problem z obcinaniem elementów czerwonych kółek, tak jak pojawiają się one na kuli ziemskiej, nawet poza kątem 90˚. Czy istnieje sposób, w jaki można zastosować projekcję do czerwonych kółek, ponieważ wygląda tak, jakby były na powierzchni globu względem kąta prostopadłego? W tej chwili pojawiają się one jako okręgi 2d względem ekranu.

Answer 1

Zamiast <circle> elementy, można użyć geometrii punkt GeoJSON:

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

Te mogą być następnie obcięty przez system projekcji D3, w zależności od clipAngle że już ustawiony. Tak więc możesz mieć coś takiego:

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

Zwróć uwagę, w jaki sposób promień punktu jest ustalany przez ścieżkę dla każdego punktu. Można również ustawić pointRadius być funkcją, więc można zrobić coś takiego:

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

Druga część Twojego pytania pyta, czy kręgi mogą być prawdziwymi okręgi geograficzne. d3.geo.circle może generować geograficzne cechy okręgu (znowu, jak GeoJSON), które zostaną odpowiednio przycięty:

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