javascript - 将标记放在使用 topoJSON 和 d3.js 生成的 map 上

标签 javascript map d3.js geojson topojson

我正在创建一个特定状态的 map ,我一直在试验 d3.js 和 topojson 并创建了一个很棒的 map ,但现在我想在 map 上添加一个标记。

但现在我遇到了问题,因为当我添加标记时,有一个 GeoJSON 文件可以将标记添加到生成的 map 中,而且我想在按下标记时打开工具提示。

我的 map 与此非常相似:http://bl.ocks.org/mbostock/4699541我想要的只是通过具有标记地理坐标的 GeoJSON 文件向状态添加标记。

So the map is currently 所以目前 map 是

Map expected... 预计 map ...

最佳答案

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

关于javascript - 将标记放在使用 topoJSON 和 d3.js 生成的 map 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21397608/

相关文章:

javascript - Node.Js 与 HttpAsync (asp.net)

javascript - JQuery AJAX DataTable 在重新加载数据后不加载标准函数

javascript - PHP、jQuery、Ajax、发送带有附件字段代码的 HTML 输入字段不起作用

map - 遍历 golang map

javascript - 将点添加到 D3 图表

javascript - Linechart Zoom D3 V4 上的文本转换和日期时间格式问题

javascript - 将 div 从一个背景渐变过渡到另一个

r - 世界地图 - 将国家的一半映射为不同的颜色

java - 映射所需的行为类型

javascript - 使用C3创建折线图