本文详解如何在 D3.js 构建的世界地图中，通过点击任意国家区域准确获取其名称（如 "China"、"United States"），核心在于正确访问 GeoJSON 中的 properties.name 字段并绑定 click 事件处理器。
本文详解如何在 d3.js 构建的世界地图中，通过点击任意国家区域准确获取其名称（如 "china"、"united states"），核心在于正确访问 geojson 中的 `properties.name` 字段并绑定 click 事件处理器。
在 D3 的 choropleth（分级统计）世界地图中，国家图形由 GeoJSON 数据驱动，每个国家对应一个 feature 对象。该对象结构为：
{
"type": "Feature",
"id": "CHN",
"properties": {
"name": "China",
"code": "CN",
"population": 1412600000
},
"geometry": { ... }
}
因此，国家名称并非存储在 DOM 元素的 .name 属性中（this.name 是无效的），而必须从绑定的数据对象 d 的嵌套属性 d.properties.name 中读取。
以下是实现点击获取国家名称的关键步骤与优化代码：
jQuery点击事件遮罩弹出层可移动特效代码
下载
"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
✅ 正确绑定事件并访问数据
确保 on("click", mouseClick) 在 .join("path") 链式调用末尾添加，并将事件处理器签名更新为 (event, d) —— 这是 D3 v6+ 的标准写法（event 为原生 MouseEvent，d 为当前国家的 feature 数据）：
let mouseClick = function(event, d) {
// 高亮当前国家（可选交互反馈）
d3.select(this)
.transition().duration(200)
.style("stroke", "#ff7f0e")
.style("stroke-width", "2px");
// ✅ 关键：从 d.properties.name 获取国家名
const countryName = d.properties.name || d.id || "Unknown";
console.log("Clicked country:", countryName);
// 可扩展：显示 tooltip 或更新页面文本
d3.select("#country-info")
.text(`Selected: ${countryName}`)
.style("display", "block");
};
⚠️ 注意事项
-
不要使用
this.name或d.name：this指向 SVG<path></path>元素（无name属性），d是 GeoJSON feature，其顶层无name，需走d.properties.name。 -
容错处理：部分 GeoJSON 的
properties可能缺失name字段（尤其小岛屿或争议地区），建议回退到d.id或提供默认值。 -
性能提示：避免在
mouseClick中重复执行d3.selectAll(...)；若仅需高亮当前国家，可移除全局透明度操作以提升响应速度。 -
数据对齐：本例中
world.geojson使用d.id（ISO 3166-1 alpha-3）匹配人口 CSV 的d.code，但国家名称始终来自 GeoJSON 的properties.name，与 CSV 无关。
? 完整可运行示例（精简版）
<svg id="my_dataviz" width="800" height="500"></svg><div id="country-info" style="margin-top:10px;font-weight:bold;display:none;"></div>
<script src="https://d3js.org/d3.v6.js"></script><script>
const svg = d3.select("svg");
const width = +svg.attr("width"), height = +svg.attr("height");
const projection = d3.geoMercator().scale(120).center([0, 20]).translate([width/2, height/2]);
const path = d3.geoPath().projection(projection);
Promise.all([
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"),
]).then(([topo]) => {
svg.append("g")
.selectAll("path")
.data(topo.features)
.join("path")
.attr("d", path)
.attr("fill", "#ccc")
.attr("stroke", "#fff")
.attr("stroke-width", 0.5)
.on("click", (event, d) => {
console.log("Country name:", d.properties.name);
d3.select("#country-info").text(`→ ${d.properties.name}`).style("display", "block");
});
});
</script>
掌握这一模式后，你不仅能获取国家名称，还可轻松提取 d.properties.code（国别码）、d.id（GeoJSON ID）或结合外部数据集关联人口、GDP 等维度信息 —— 这正是 D3 地理可视化数据驱动的核心逻辑。
