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

【问题标题】：D3js setting fill to none programmatically impacts onClick EventD3js 将填充设置为无以编程方式影响 onClick 事件
【发布时间】：2019-09-06 06:29:10
【问题描述】：

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

    <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

一开始，我所有的路径都有 fill: none 和一个 onClickEvent，它会按我的预期触发。

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

我在这里做错了什么？

【问题讨论】：

您能否在 fillTopo 函数中记录 isTopo 的值，看看在第一次和连续点击的情况下该值是相同还是不同。可能是 isTopo 值在您的代码中某处被修改。
我确实在函数的开头添加了 console.log，它是假的（或未定义的），最后是真的。在第二个 Click 上，它是第一个 true，然后是 false。似乎一切都是对的。我注意到的是，如果我选择一个路径，它会得到 fill:blue，然后当我将按钮上的 fill 属性更改为 none 时，单击 fill: blue 并在该路径上触发我的 onMouseClick 事件。
尝试从函数开头的 svg 中删除所有现有路径，看看它是否有效。试试这个 svgContainer.selectAll("path").remove();
我的同事发现了问题，这是因为填充：无。当我单击边界线时，我的路径 onClick 事件会触发。所以现在，当我“移除”我的颜色时，我只是用白色填充我的路径。我的错误是认为我的所有路径都已填充：一开始没有，但那不是真的抱歉。

标签： javascript d3.js svg

【解决方案1】：

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

 pointer-events: visible;

可能是你想要的。

【讨论】：