嘿，我仔细看了你的代码，其实你离成功只差一步啦！你已经在数据解析阶段把state、city这些字段都加载到每个数据对象里了，只是需要在悬浮提示的回调里正确调用它们就行～

核心问题分析 #

你在.row()函数里已经明确把数据集里的city、state等字段映射到了数据对象d中：

.row(function(d) { 
  return { 
    permalink: d.permalink, 
    lat: parseFloat(d.lat), 
    lng: parseFloat(d.long), 
    city: d.city, 
    state: d.state, 
    created_at: moment(d.created_at,"YYYY-MM-DD HH:mm:ss") 
  }; 
})

这意味着每个数据对象d都包含了这些属性，完全可以直接在mouseover事件里访问。

修改悬浮提示框代码 #

你只需要修改div.html()的内容，把想要展示的字段拼接进去就行。比如要显示州、城市和坐标，可以这么写：

.on("mouseover", function(event, d) { // 注意D3 v6+需要把event作为第一个参数
  div.transition()
    .duration(200)
    .style("opacity", .9);
  div.html(
    "<strong>State:</strong> " + d.state + "<br>" +
    "<strong>City:</strong> " + d.city + "<br>" +
    "<strong>Coordinates:</strong> " + d.lat + ", " + d.lng
  )
  .style("left", (event.pageX) + "px")
  .style("top", (event.pageY - 28) + "px");
})

注意事项 #

• D3版本兼容性：如果你的D3是v6及以上版本，d3.event已经被废弃，需要把事件对象作为回调函数的第一个参数（比如上面代码里的event），否则会出现d3.event为undefined的错误。
• 字段名拼写检查：确保你调用的字段名和.row()里定义的完全一致，比如不要把d.state写成d.State（大小写敏感）。
• 数据传递正确性：确认调用displaySites(site_data)时，传递的site_data确实是加载完成的包含所有字段的数据集，也就是你存在window.site_data里的内容。

这样修改后，你的悬浮提示框就能正常显示state、city等额外字段啦！

内容的提问来源于stack exchange，提问作者Deeba Yavrom