Question

我已经从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和this开始使用csv文件的不同教程和方法，但无论我做什么都不会画圆圈，我缺少什么？

Answer 1

Adam Pearce是正确的，坐标是[33.46764，-112.0785]，但是还有另一个问题：当从lat-long转换为coords时，你需要将经度作为第一个参数传递，而不是纬度！

棘手的是，如果使用不在（低于48，阿拉斯加，夏威夷）的值调用的Albers投影将默默返回null。

尝试在控制台中翻译[33.46764，-112.0785]：

> proj = d3.geo.albersUsa()
function albersUsa(coordinates) {
      var x = coordinates[0], y = coordinates[1];
      point = null;
      (lower48Point(x, y), point) || (alaskaPoint(x, y), point) || hawaiiPoint(x, y);
      return point;
    } d3.v3.js:3257

> proj( [33.46764, -112.0785] )
null

> proj( [-112.0785, 33.46762] )
[241.08874867733104, 327.6295325563234]

宾果。在这种情况下，使用控制台（在本例中为Chrome）查看我们调用的实际函数非常有用。

这是使用d3版本3.3.8完成的。

Answer 2

Schimmy的回答是正确的，但我起初并不理解。以下是我在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");

Answer 3

您可能还想使用attr("transform", "translate")而不是attr("cx", coor[0].attr("cy", coor[1])。

如果你有一个美国的GeoJson，你想在每个县上画一个圆圈：

  // us = the geoJson file

  svg.append("circle")
    .data(topojson.feature(us, us.objects.counties).features)
  .enter().append("circle")
    .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
    .attr("r", 5)
    .style("fill", "red");

您可能会发现这比"cx"和"cy"更有效。

来自http://bost.ocks.org/mike/bubble-map/

在d3.js地图中添加一个圆圈

3 个答案: