D3.js实现鼠标点击连线时悬停闪烁、第二点高亮触发困难问题

SVG 元素遵循后插入层级更高的渲染规则，你点击第一个点后动态生成的跟随鼠标移动的 <line> 元素，层级高于所有提前渲染的圆点 <circle> 元素，默认会拦截所有鼠标交互事件。当鼠标移动到连线覆盖的区域时，事件无法穿透到下层的圆点，就会出现 hover 高亮失灵、点击难以触发的问题。

只需要给连线元素添加不响应鼠标事件的样式规则即可，修改 CSS 中 line 选择器的配置，新增 pointer-events: none 属性：

line {
  stroke: black;
  stroke-width: 2px;
  stroke-linecap: square;
  pointer-events: none; /* 新增该行即可修复交互问题 */
}

添加后连线不会再拦截任何鼠标操作，事件可以正常穿透到下层的圆点，选择第二个点时的 hover 和点击响应就会和选择第一个点时一样灵敏。

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