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.
InformationsquelleAutor Nyegaard | 2013-05-07
Schreibe einen Kommentar