将标记放置到使用topoJSON和d3.js生成的地图中

问题描述

我创建了一个特定状态的地图，我一直在尝试d3.js和topojson，并创建了一个伟大的地图，但现在我想在地图上添加一个标记。

I am creating a map of a particular state, I have been experimenting with d3.js and topojson and have created a great map, but now I want to add a marker on the map.

但是现在我有问题，因为我添加标记有一个GeoJSON文件添加标记到生成的地图，还有我想打开一个工具提示每当一个标记被按下。

But now I have problems because as I add the marker have a GeoJSON file to add markers to the map generated and also the power I'd like to open a tooltip whenever a marker is pressed.

我的地图与此非常相似：，所有我想要的是通过具有标记的地理坐标的GeoJSON文件向状态添加标记。

My map is very similar to this: http://bl.ocks.org/mbostock/4699541 and all I want is to add markers to states through a GeoJSON file that has the geographical coordinates of the markers.

所以地图目前是

So the map is currently

需要映射...

Map expected...

推荐答案

您可以在json回调结束时添加这样的东西：

You can add somthing like this at the end of your json callback:

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", function(d) {return "translate(" + projection([d.long,d.lat]) + ")";});

这篇关于将标记放置到使用topoJSON和d3.js生成的地图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！