D3.js折线图切换单条线后Tooltip无法接收数据问题

核心问题 #

切换为单折线后Tooltip无法获取数据，本质是D3数据绑定方式的适配问题：你用.data([O[i]])给单个Tooltip元素绑定数组形式的数据，双折线场景下能正常工作，但单折线时数据绑定的更新逻辑未正确触发回调；同时调试用的.text(d => console.log(d))无意义且会干扰后续内容渲染。

修复步骤 #

1. 替换数据绑定方式：将.data([O[i]])改为.datum(O[i])

   • .data()用于给多个元素绑定数组数据，而Tooltip是单个DOM元素，.datum()直接绑定单个数据对象，更适配该场景，避免数组绑定带来的更新歧义。

2. 移除无效调试代码：删掉.text(d => console.log(d))这一行

   • 这行代码中console.log(d)无返回值，会将Tooltip文本设为undefined，还会覆盖后续.html()生成的内容。

3. 调整链式调用顺序（可选）：将.attr('class', css.tooltipEvent)移到样式设置之前，确保类名先生效，样式能正确应用。

修复后代码片段 #

const tooltip = d3.select('.Tooltip')
  .style('visibility', 'hidden')
  .style('pointer-events', 'none')

function mousemove (event) {
  // 坐标获取逻辑保持不变
  const mouse = d3.pointer(event, this)
  const [xm, ym] = mouse
  const mouseWindows = d3.pointer(event, d3.select(this))
  const [xmw, ymw] = mouseWindows

  const i = d3.least(I, i => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym)) // 最近点计算
  path.style('stroke-width', ([z]) => Z[i] === z ? strokeWidthHovered : strokeWidth).filter(([z]) => Z[i] === z).raise()
  dot.attr('transform', `translate(${xScale(X[i])},${yScale(Y[i])})`)

  // Tooltip修复部分
  tooltip
    .datum(O[i]) // 改用datum绑定单个数据
    .attr('class', css.tooltipEvent)
    .style('left', `${tooltipX(xScale(X[i]), offSetX)}px`)
    .style('top', `${tipY}px`)
    .style('visibility', 'visible')
    .html(d => chartConfig.options.tooltip.pointFormat(d))
}

额外验证点 #

• 确认切换单折线时，I数组的索引范围正确，O[i]确实是有效数据对象（你已通过日志验证，可跳过此步）。
• 检查.Tooltip元素在切换单折线后是否仍存在于DOM中，未被意外移除。

内容的提问来源于stack exchange，提问作者Hristo Dimitrov