1

我正在尝试使用 d3 和 topojson 在地图上绘制一个圆圈，但我无法弄清楚。这是我的代码

var width = 960,
height = 500;

var projection = d3.geo.mercator()
    .center([0, 5 ])
    .scale(900)
    .rotate([-180,0]);

var svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "svg-map");

var path = d3.geo.path()
    .projection(projection);

var g = svg.append("g");
d3.json("/static/lib/topojson/world-110.json", function(error, topology) {
    svg.append("path")
      .datum(topojson.feature(topology, topology.objects.countries))
      .attr("d", d3.geo.path().projection(d3.geo.mercator()));

    var coordinates = projection([10,20])
    svg.append('svg:circle')
        .attr('cx', coordinates[0])
        .attr('cy', coordinates[1])
        .attr('r', 5);
});
4

1 回答 1

2

您看到（或未看到）的问题是因为您在此行中定义了一个投影：

var projection = d3.geo.mercator()
    .center([0, 5 ])
    .scale(900)
    .rotate([-180,0]);

你用它来转换你的坐标。然后，topojson 数据路径的投影设置如下：

.attr("d", d3.geo.path().projection(d3.geo.mercator()));

因此，topojson 使用没有变换的墨卡托投影进行渲染，而您的圆圈使用已变换的墨卡托投影进行渲染。

我不完全确定你希望你的最终地图看起来如何，但假设它是一张在非洲有一个点的世界地图，只需在投影定义中注释掉中心、缩放和旋转线，如下所示：

var projection = d3.geo.mercator();
    //.center([0, 5 ])
    //.scale(900)
    //.rotate([-180,0]);

并将 svg.append 块中的 d3.geo.path 替换为 path ，如下所示：

.attr("d", d3.geo.path().projection(d3.geo.mercator()));

至

.attr("d", path);

哦，如果你没有，你需要给圆圈一些填充，所以像

.style("填充", "红色")

于 2013-11-15T06:56:44.087 回答