使用topoJSON和d3.js为地图添加标记

Question

使用topoJSON和d3.js为地图添加标记

javascriptdictionaryd3.jsgeojsontopojson

3

我正在创建一个关于一个特定州的地图，我一直在尝试使用d3.js和topojson来创建一张很棒的地图，但现在我想在地图上添加一个标记。

但是现在我遇到了问题，因为我需要将GeoJSON文件添加到生成的地图中，以便添加标记，并希望在按下标记时打开工具提示。

我的地图与此非常相似：http://bl.ocks.org/mbostock/4699541，我只想通过一个包含标记地理坐标的GeoJSON文件向各州添加标记。

当前地图如下图所示： So the map is currently

期望的地图如下图所示： Map expected...

- Rodrigo Moreno

1

你看过地图教程吗？它描述了如何向地图添加标记。 - Lars Kotthoff

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sepans · Accepted Answer

你可以在你的json回调函数末尾添加类似这样的内容：

var marks = [{long: -75, lat: 43},{long: -78, lat: 41},{long: -70, lat: 53}];

svg.selectAll(".mark")
    .data(marks)
    .enter()
    .append("image")
    .attr('class','mark')
    .attr('width', 20)
    .attr('height', 20)
    .attr("xlink:href",'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/24x24/DrawingPin1_Blue.png')
    .attr("transform", d => `translate(${projection([d.long,d.lat])}`);