Fügen Sie einen Kreis um ein d3.js anzeigen
Habe ich erzeugt eine Karte des Phoenix aus dieser GeoJson und machte es zu zeigen, wie ich es haben möchte.
Nun würde ich gerne hinzufügen, Kreise auf der Karte repräsentieren etwas von Interesse, aber Kreise niemals auftauchen. Hier ist der code:
<script type="text/javascript">
var h = 1280;
var w = 1280;
var projection = d3.geo.albers().scale(80000).center([0, 33.44]).rotate([112.07, 0]).translate([920, 850]);
var path = d3.geo.path().projection(projection);
var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
d3.json("data/phoenix.json", function(json) {
svg.selectAll("path").data(json.features).enter().append("path")
.attr("d", path).style("fill", "grey");
var coordinates = projection([33.46764,112.0785]);
svg.append("circle")
.attr("cx", coordinates[0])
.attr("cy", coordinates[1])
.attr("r", 5)
.style("fill", "red");
});
</script>
Ich habe versucht, verschiedene Tutorials und howto ' s wie aus bost.ocks.org und diese, wo es mit einer csv-Datei, aber egal was ich mache es wird nicht ziehen Sie den Kreis, was bin ich?
- Haben Sie geprüft, ob die Koordinaten innerhalb des angezeigten Bereichs? Der Kreis kann gezogen werden, wo Sie es nicht sehen können.
- [33.46764,112.0785] in China, [33.46764, -112.0785] in Arizona
- Ich denke, dass Lars und Adam sind auf dem richtigen Weg, und wenn Sie benötigen ein anderes tutorial, dies.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Adam Pearce ist richtig, dass die Koordinaten sind [33.46764, -112.0785], allerdings gibt es ein weiteres problem: bei der übersetzung von lat-long, die coords, die Sie brauchen, um passieren Längengrad wie der erste parameter, nicht Breite!
Die heikle Sache ist, dass die albers-Projektion, wenn der Aufruf mit einem Wert nicht in der (unteren 48, alaska, hawaii) gibt null zurück, schweigend.
Versucht zu übersetzen [33.46764, -112.0785] in der Konsole:
Bingo. In diesem Fall war es nützlich, einen Blick auf die eigentliche Funktion, die wir aufrufen, indem Sie mit der Konsole (in diesem Fall Chrome).
Diese wurde durchgeführt unter Verwendung von d3-version 3.3.8.
Schimmy ' s Antwort ist korrekt, allerdings habe ich nicht auf Anhieb verstehen. Hier ist, wie ich fügte hinzu, ein Kreis auf einem Albers anzeigen:
Können Sie auch verwenden möchten
attr("transform", "translate")
eher alsattr("cx", coor[0].attr("cy", coor[1])
.Wenn Sie eine GeoJson fie von den USA und Sie wollen zeichnen einen Kreis auf jedes county:
Können Sie finden diese viel effizienter als
"cx"
und"cy"
.Vom http://bost.ocks.org/mike/bubble-map/