Question

我正在尝试使用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);
});

Answer 1

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

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替换为路径，如下所示：

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

到

.attr("d", path);

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

.style（＆＃34; fill＆＃34;，＆＃34; red＆＃34;）

D3.js地图上的绘图点

1 个答案: