D3.js v3转v5 TopoJSON地图：点击事件无法获取国家数据求助

将基于GeoJSON和D3.js v3开发的地图迁移为TopoJSON和D3.js v5版本后，地图可正常绘制，但点击、鼠标悬停国家时无法获取绑定的要素数据，控制台仅输出202、16这类整数索引值。相关代码如下：

const svg = container
  .append("svg")
  .attr("preserveAspectRatio", "xMinYMin meet")
  .attr("viewBox", "0 0 " + width + " " + height);

const projection = d3
  .geoMercator()
  .translate([width / 2, height / 2])
  .scale(100)
  .center([0, 40]);

const path = d3.geoPath().projection(projection);

const countries = topojson.feature(
  topojsonData,
  topojsonData.objects.ne_50m_admin_0_countries
);

svg
  .selectAll("path")
  .data(countries.features)
  .enter()
    .append("path")
    .attr("d", path)
    .on("click", onClick);

var onClick = function (event, d) {
  console.log(d);
};

核心原因 #

1. 函数定义顺序错误：代码先执行事件绑定.on("click", onClick)，再用var声明并赋值onClick函数。由于var的变量提升特性，绑定事件时onClick的值为undefined，导致实际触发的并非预期的处理函数。
2. D3版本参数变更：D3.js v4+调整了事件处理函数的参数顺序：
   • v3及更早版本：参数顺序为(datum, index)
   • v4+版本：参数顺序为(event, datum, index)

解决步骤 #

1. 调整函数定义顺序
   将onClick函数的定义移至事件绑定代码之前，确保绑定时有可用的函数：

   // 先定义事件处理函数
   var onClick = function (event, d) {
     console.log(d); // 此时d为绑定的国家GeoJSON要素数据
   };
   
   // 再执行事件绑定
   svg
     .selectAll("path")
     .data(countries.features)
     .enter()
       .append("path")
       .attr("d", path)
       .on("click", onClick);
   

2. 确认参数顺序正确
   确保事件处理函数的第一个参数是事件对象，第二个是绑定的要素数据d。如果需要索引，可添加第三个参数：

   var onClick = function (event, d, i) {
     console.log("国家数据:", d);
     console.log("索引:", i);
   };
   

3. 验证数据绑定有效性
   可在数据绑定后打印要素数组，确认countries.features包含预期的属性：

   console.log(countries.features); // 检查输出的GeoJSON要素是否带有自定义数据属性
   

内容的提问来源于stack exchange，提问作者Phil Gyford