D3.js折线图交互文本显示undefined而非实际值的问题排查

数据绑定层级错位 #

.mouse-per-line悬浮提示元素初始化时，绑定的是countries数组的顶层国家维度对象，每一项的结构为：

{
  name: "国家名称",
  values: [ /* 内嵌的逐时间点数据，每项结构为{date, temperature, event} */ ],
  visible: true
}

这个顶层对象本身不存在date、event这类单时间点属性，这类属性全部内嵌在其values子数组中。

交互取值逻辑错误 #

mousemove事件的transform回调中，仅通过二分查找路径长度的方式，定位到了与鼠标x坐标匹配的几何像素位置pos，全程未将该几何位置映射为当前国家values数组中对应的单条时间记录。

标注为问题点的代码行中：

d3.select(this)
  .select('text').text(d => `Date: ${d.date} | Temperature: ${y.invert(pos.y).toFixed(2)} | Event: ${d.event}`);

此处箭头函数的参数d，实际继承自外层的国家顶层绑定对象，并非单条时间记录。直接从顶层对象读取d.date、d.event，必然返回undefined。

温度值可正常显示的原因：温度值是通过y.invert(pos.y)从几何坐标反算得到，不依赖绑定对象的属性，因此不受数据层级错位的影响。

修复实现 #

在定位完路径几何坐标后，借助x轴比例尺将鼠标x像素值反算为对应日期，从当前国家的values数组中匹配对应单条记录后，再生成提示文本：

1. 先在transform回调开头补上pos的局部声明，避免全局变量污染：

   .attr("transform", function(d, i) {                    
     var beginning = 0,
         end = lines[i].getTotalLength(),
         target = null,
         pos; // 局部声明pos变量
     // ...原有二分查找逻辑
   });
   

2. 二分查找定位完pos后，新增单条数据匹配逻辑：

   // 反算鼠标位置对应的日期值
   const hoverDate = x.invert(mouse[0]);
   // 在当前国家的数据数组中匹配对应时间点的记录
   const currentPoint = d.values.find(v => +v.date === +hoverDate);
   

3. 替换文本赋值逻辑，直接使用匹配到的单条数据的属性：

   d3.select(this)
     .select('text').text(`Date: ${currentPoint?.date ?? '--'} | Temperature: ${y.invert(pos.y).toFixed(2)} | Event: ${currentPoint?.event ?? '无记录'}`);
   

内容的提问来源于stack exchange，提问作者Nathan Camilleri