D3js将填充设置为无会以编程方式影响onClick事件

Question

有人可以向我解释以下在不同条件下操纵路径颜色的方法有什么问题吗？

    <button ID="btnTopo" onclick="fillTopo()"> FillTopo</button>

                var isTopo;
                function fillTopo() {

                            svgContainer.selectAll("path")
                                .filter(function (d) {
                                    if (d.properties.PE_Nr == 7000) { 
                                        return true;
                                    }
                                })
                                .attr("fill", isTopo ? "none" : "#FF6600");

                            svgContainer.selectAll("path")
                                .filter(function (d) {
                                    if (d.properties.PE_Nr == 7200) { 
                                        return true;
                                    }
                                })
                                .attr("fill", isTopo ? "none" : "#FFFF00");

                            svgContainer.selectAll("path")
                                .filter(function (d) {
                                    if (d.properties.PE_Nr == 6600) {
                                        return true;
                                    }
                                })
                                .attr("fill", isTopo ? "none" : "#F20000");

        .
        .
        .
isTopo = !isTopo;
        + 30

一开始，我所有的路径都填满了：没有一个和一个onClickEvent，它会按预期触发。

OnButtonClick我执行fillTopo函数。第一次单击时，一切正常，我的路径OnClick-Event触发，但是在第二次单击按钮时，其填充再次变为无 我的路径onClick事件停止触发。

我在这里做错了什么？

Answer 1

您需要调整pointer-events property，以使未填充的形状仍然对鼠标单击有反应。听起来像

 pointer-events: visible;

可能就是您想要的。