將標記放到使用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])}`);