javascript - 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

与您的问题无关，但从用户的 Angular 来看，您可以选择一个类别但之后不能取消选择(即查看全部)这一事实很烦人。