如何在d3.curveLinearClosed曲线上显示上下两个独立tooltip？

问题本质 #

d3.curveLinearClosed 生成的是单条连续闭合SVG路径，D3默认的路径最近点检测、二分数据匹配逻辑，只会沿路径绘制顺序返回距离鼠标位置最近的单个采样点，无法自动区分同一X坐标下闭合路径上下两段的独立点位，因此默认只能触发单个Tooltip。

具体实现方向 #

• 视觉层保持原有逻辑不变：仍然用完整原始数据集+d3.curveLinearClosed绘制用户可见的闭合曲线，不要修改路径生成参数避免出现视觉缺口。
• 交互层做拆分，不要直接把鼠标事件绑定在可见的闭合路径上：
  • 先找到闭合曲线数据集里的左右极值拐点（即曲线最左、最右的两个端点，也是闭合路径自动连接的底边的两个端点），以这两个点为分界，把原始数据集拆成上半段、下半段两个独立的点集。
  • 额外生成两个完全透明、无描边无填充的交互用路径，分别用拆分好的上半段、下半段点集+d3.curveLinear生成，层级放在可见闭合路径的上方，铺满整个曲线区域。
• 两个透明交互路径各自绑定独立的鼠标事件、维护独立的Tooltip实例：鼠标移入/在上半段交互路径移动时，触发顶部Tooltip的内容计算与定位显示；鼠标在下半段交互路径移动时，触发底部Tooltip的内容计算与定位显示，两个Tooltip的显隐状态互不干扰。
• 如果不想新增透明交互DOM，也可以直接改造画布的全局mousemove点位匹配逻辑：弃用默认的单二分查找匹配方法，鼠标移动时分别对上下两段点集做距离计算，只要鼠标位置到某一段投影点的距离小于预设的触发阈值，就触发对应位置的Tooltip显示，支持两个Tooltip同时触发。
• 避坑提示：不要尝试给单条闭合Path绑定多套Tooltip触发逻辑，单个SVG路径元素的事件回调默认只会返回一个最近匹配点，无法天然区分上下路径段的点位。

内容的提问来源于stack exchange，提问作者Sumskyi Vasyl