Установка 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

В начале все мои пути имеют заполнение: none и onClickEvent, который запускается, как я ожидал.

OnButtonClick Я выполняю функцию fillTopo. На первом клике все работает нормально, мой путь OnClick-Event срабатывает, а на втором кликаешь на кнопку, которая снова меняет заливку на ноль событие my path onClick прекращает работу.

Что я здесь не так делаю?

Answer 1

Вам необходимо настроить свойство pointer-events , чтобы ваши незаполненные фигуры по-прежнему реагировали на щелчки мыши.Похоже, что

 pointer-events: visible;

, вероятно, то, что вы хотите здесь.