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

Question

我正在创建一个特定州的地图,我一直在尝试使用d3.js和topojson并创建了一个很棒的地图,但现在我想在地图上添加一个标记.

但是现在我遇到了问题,因为当我添加标记有一个GeoJSON文件来为生成的地图添加标记时,我还想在按下标记时打开工具提示.

我的地图非常类似于:http://bl.ocks.org/mbostock/4699541,我想要的是通过具有标记的地理坐标的GeoJSON文件向状态添加标记.

所以地图是目前的

预计地图......

Answer 1

你可以在你的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])}`);