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>

我已经尝试过遵循不同的教程和howto，就像来自bost.ocks.org的一样，这里有一个csv文件，但无论我做什么，它都不会画出圆圈，我错过了什么？

4

3 回答 3

4

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

棘手的是，如果使用不在 (lower 48, alaska, hawaii) 中的值调用 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 完成的。

于 2013-10-25T06:33:55.223 回答
4

Schimmy 的回答是正确的，但我一开始并不明白。这是我在阿尔伯斯地图上添加圆圈的方法：

    //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 回答
-1

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

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

  // 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"and更有效"cy"。

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

于 2014-11-18T16:17:17.917 回答