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.Klip koła i rzut z ortografią D3
10
A
Odpowiedz
28
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);
Powiązane problemy
- 1. unikać d3.js koła nakładające
- 2. Rzut ruby i skuteczność
- 3. d3.js dodając akcję kliknięcia do koła układu siłowego?
- 4. rzut ortogonalny z numpy
- 5. Klip do narysowanej ścieżki
- 6. Jak znaleźć wszystkie nakładające się koła z promienia środkowego koła?
- 7. Styl koła SVG z CSS
- 8. Jak dopasować szerokość tekstu do rozmiaru koła w pakiecie z okręgiem D3
- 9. Problemy z d3.json, d3.xhr i między domenami
- 10. Obsługa wyjątków: rzut, rzuty i rzucanie się
- 11. Koła rysunkowe na obrazie z matplotlib i numpy
- 12. jak wyłączyć rzut przewijaniaView
- 13. Elementy rozmiaru SVG z JavaScript i D3
- 14. SVG - Jak przyciąć zdjęcie do koła?
- 15. Przycisk koła css
- 16. Rzut/mirroring obrazów
- 17. Auto klip i dopisz kropki w etykiecie WPF
- 18. Rzut RuntimeException wewnątrz strumienia z Optional.orElseThrow
- 19. Segmentowanie kształtów przypominających koła z obrazu binarnego
- 20. Co oznacza "rzut"; sam z siebie zrobić?
- 21. MongoDB Rzut dokument podrzędny
- 22. Przechwytywanie zdarzeń koła przewijania
- 23. Wykres kołowy D3.js ... czy można przesuwać wycinek koła po wybraniu?
- 24. D3: Zamienianie d3.svg.diagonal() na d3.svg.line()
- 25. d3.js: dodaj rozpiętość z klasą glyphicon
- 26. W jaki sposób utworzyć klip div z widoczną zawartością?
- 27. d3 rysunek strzałki wskazówki
- 28. W wideo HTML5, jak odtwarzać mały klip z długiego wideo?
- 29. Używanie D3 z Elmem
- 30. Łączenie d3.js i backbone.js
Dziękujemy za poświęcenie czasu, aby udzielić odpowiedzi, naprawdę to doceniam. Twój kod był dokładnie tym, za czym byłem. Dziękuję również za wszystkie twoje wspaniałe zasługi dla samego D3! –
+1 za to, co @TomStove powiedział ... – meetamit
@Jason jest jakiś sposób na zmianę kąta/promienia 'd3.geo.circle's? A co z pochodzeniem? – Fresheyeball