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.Clip circolare e proiezione con ortografia D3
10
A
risposta
28
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);
Problemi correlati
- 1. Mappa con d3.js e TopoJSON, Albers Siberia proiezione
- 2. Albero D3: linee al posto della proiezione diagonale
- 3. Clip SVGPercorso e trasformazioni
- 4. Eclipse e scheda clip
- 5. proiezione ortogonale con numpy
- 6. Clip CSS e posizionamento assoluto
- 7. proiezione isometrica vera con opengl
- 8. python correlazione circolare circolare
- 9. Riferimento circolare e costruttori
- 10. È possibile utilizzare un layout del pacchetto circolare in d3.js con dimensioni di cerchio fisse?
- 11. Visualizzazione della mappa con d3.js e geojson
- 12. Riferimento circolare con mangusta
- 13. D3: Sostituzione di d3.svg.diagonal() con d3.svg.line()
- 14. UITableViewCell angoli arrotondati e sottocartelle clip
- 15. Visualizzazione dei dati gerarchici con l'inserimento circolare in ggplot2?
- 16. Istogrammi di ridisegno con Crossfilter e D3
- 17. Elementi SVG ridimensionabili con JavaScript e D3
- 18. Json e Java - Riferimento circolare
- 19. clip-path non funziona con chrome
- 20. XSD.exe e "Riferimenti gruppo circolare"
- 21. svg clip di immagine e spettacolo ictus
- 22. d3.js e document.onReady
- 23. Errori di ortografia in Microsoft Word
- 24. proiezione mappata con oggetto companion in SLICK
- 25. Il tracciato di clip Svg all'interno del rettangolo non funziona
- 26. Clip di testo SVG alla larghezza del rettangolo in una tre mappa D3
- 27. Grafico zoom in D3
- 28. Crea pulsante circolare con bordo
- 29. OpenGL Near Clip Plane
- 30. Disegno heatmap con d3
Grazie per il tempo dedicato a fornire una risposta, lo apprezzo davvero. Il tuo codice era esattamente quello che stavo cercando. Inoltre, grazie per tutti i tuoi meravigliosi contributi alla stessa D3! –
+1 per ciò che @TomStove ha detto ... – meetamit
@Jason c'è un modo per passare l'angolo/raggio di 'd3.geo.circle'? Che ne dici dell'origine? – Fresheyeball