0

このGeoJsonからフェニックスの地図を生成し、希望どおりに表示しました。

ここで、関心のあるものを表すためにマップに円を追加したいと考えていますが、円は表示されません。コードは次のとおりです。 

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

bost.ocks.orgのような別のチュートリアルとハウツーに従ってみましたが、これは csv ファイルを使用していますが、何をしても円が描画されません。何が欠けていますか?

4

3 に答える 3

4

シミーの答えは正しいですが、最初はわかりませんでした。Albers マップに円を追加する方法は次のとおりです。

    //var projection = d3.geo.albersUsa();
    var coordinates = projection([-112.0785,33.46764]);
    svg.append("circle")
            .attr("cx", coordinates[0])
            .attr("cy", coordinates[1])
            .attr("r", 5)
            .style("fill", "red");
于 2014-11-18T16:04:55.050 に答える