この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 ファイルを使用していますが、何をしても円が描画されません。何が欠けていますか?