在 iOS Safari 等触控设备上，pointermove 事件无法持续触发 this 绑定的原始数据索引（如 d.index 或 d3.local() 存储值），需改用 document.elementFromPoint() 动态定位当前触点下的 SVG 元素并提取其数据索引。
在 ios safari 等触控设备上，`pointermove` 事件无法持续触发 `this` 绑定的原始数据索引（如 `d.index` 或 `d3.local()` 存储值），需改用 `document.elementfrompoint()` 动态定位当前触点下的 svg 元素并提取其数据索引。
在基于 D3.js 的 SVG 图表中实现触摸拖拽式交互（例如连续点亮/变色多个圆点）时，开发者常期望 pointermove 事件能像鼠标悬停一样，持续返回当前触点下元素的数据索引。然而在 iOS Safari 等移动端浏览器中，该事件的 this 上下文和传入参数 d 往往冻结于 touchstart 初始时刻，无法反映手指滑动过程中经过的新元素——这是浏览器为优化触控性能而采取的权衡策略，并非代码缺陷。
根本原因在于：移动端 pointermove 在连续手势中不保证逐帧重绑定事件监听器上下文，d 参数不会自动更新，且 d3.local() 等绑定到 DOM 节点的临时状态也无法被 pointermove 自动同步读取。
✅ 正确解法是放弃依赖事件参数或节点绑定索引，转而主动查询触点位置对应的元素：
function touched(event) {
// 关键：动态获取当前触点下的 DOM 元素
const targetElement = document.elementFromPoint(event.clientX, event.clientY);
if (!targetElement || !d3.select(targetElement).datum()) return;
// 安全提取索引（确保 datum 包含 index 字段）
const i = d3.select(targetElement).datum().index;
// 更新状态并重绘
LEDs[i] = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
updateLEDs(); // 或更高效地局部更新 circleNodes
}⚠️ 注意事项：
-
elementFromPoint()返回的是原生 DOM 元素，需用d3.select()包装后才能调用.datum()； - 确保目标元素（如
<path></path>）具有可识别的数据结构（本例中pie(LEDs)生成的对象含index字段）； - 避免在
touched中频繁调用updateLEDs()（全量重绘开销大），推荐改为仅更新对应<circle></circle>的fill属性； - CSS 中必须设置
touch-action: none（禁用默认缩放/滚动）且确保目标图层pointer-events: all； - 添加
user-select: none和-webkit-user-select: none可防止长按选中文本干扰交互。
此方案绕过了移动端事件模型的限制，以空间查询替代上下文绑定，具备跨平台兼容性与高可靠性，是 D3.js 触控交互开发中的标准实践。
