D3 - 在某些图层上禁用/重新启用鼠标悬停

Question

我对D3和JavaScript都是全新的，所以我甚至不确定寻找问题答案的最佳方法。我目前正在尝试将此Interactive Scatter Plot/Legend改编为我自己的数据。我已经开始工作了，但是我注意到了一个问题 - 原来也是一个问题，尽管我最初没有注意到它 - 当隐藏图层时，鼠标悬停仍然会因为看不见而触发纽扣。

是否有一种方法可以调整代码，使隐藏的图层不仅不可见，而且不再触发鼠标悬停事件，这样以前上层覆盖的较低层可以通过鼠标悬停访问，一旦上层已被隐藏？

Answer 1

在该代码中执行较少量的更改，只需在过滤器之前将pointer-events设置为none，然后在过滤器之后设置为all：

legend.on("click", function(type) {
    d3.selectAll(".dot")
        .style("opacity", 0.0)
        .attr("pointer-events", "none")
        .filter(function(d) {
            return d["first_careunit"] == type;
        })
        .style("opacity", 1)
        .attr("pointer-events", "all")
        .style("stroke", "black")
});

当然，有了一个很大的重构，有最好的方法可以做到这一点。

以下是更新的bl.ocks：https://bl.ocks.org/GerardoFurtado/a2d323f9ef49e864ee589158b50cbaec/1d33bf045be6aeab83bb7c348354f1f10481f7b6

与您的问题无关，但从用户的角度来看，您可以选择一个类别但在此之后无法取消选择（即查看全部）这一事实令人烦恼。