D3.js地图上的绘图点

D3.js Plot Point on Map

本文关键字：绘图 js 地图 D3      更新时间：2023-09-26

我试图使用 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);
});

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

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

用于转换坐标。 然后，使用以下命令设置拓扑数据路径的投影：

.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（"fill"， "red"）

相关文章：