是否可以让游标不与JavaScript行交互？

Question

我用d3构建了一个图表。当光标移动到图形的顶行时，鼠标不会与线条交互，但底部不是这种情况。当我滚动底线时，光标会发生变化，这意味着您无法与焦点矩形进行交互。无论如何要做到这一点，光标不会意识到它会越过像图形顶部那样的线？

以下是图表：http://jsbin.com/obAzUNa/9/edit

感谢。

Answer 1

在你的css中试试这个：

path {
  pointer-events: none;
}

编辑：好的，有人不喜欢这个答案。 :-(我快速查看jsbin并在路径上设置指针事件似乎完全符合要求。也许它的解决方案太宽泛了。

再看一下，这个例子似乎工作得很好。但是当你越过路径时，光标会有一点闪烁。也许它是特定于浏览器的 - 不知道。

但是让我们更专注于主题路径

http://jsbin.com/EjINUNI/1/

.topic path {
  pointer-events: none;
}

画笔仍然起作用，光标没有闪烁，或者我看不到干扰。

另一种可能性是稍后在源顺序中渲染画笔，以便路径首先出现，并且画笔位于顶部。

Answer 2

包含路径（带有class = topic）的<g>元素在DOM中的后面出现，而不是设置了刷子事件的<g>。这将导致路径位于画笔<g>的顶部，因此它们首先拾取指针事件，导致指针图标发生变化。

如果插入“主题”路径以便它们在画笔矩形之前显示在DOM中，则不会发生这种情况。为所有主题创建单独的<g>可能最简单，因此您只需担心该元素的位置。