Блог

Главная - Вопросы по программированию - Диаграмма D3_Redraw с фильтром

Диаграмма D3_Redraw с фильтром

#html #d3.js #checkbox #filter #listener

#HTML #d3.js #флажок #Фильтр #прослушиватель

Вопрос:

У меня есть viz с тремя флажками, работающими как фильтры, и отображаемыми кругами в соответствии с группой (см. Рисунок ниже) а именно с флажками

В своей работе я использую draw функцию для визуализации всех данных. Проблема в том, что когда я нажимаю на любой флажок, viz исчезает и не перерисовывается. Можете ли вы помочь найти здесь ошибку?

Фрагмент моего html-файла:

 <body>
<div class="centered" style="padding-top: 25px">
</div>
<div id="svganchor" class="graph centered">
</div>
<div id="checkboxes" class="centered">
    <span style="position:relative; top: 3px">Toggle Elements:amp;nbsp;amp;nbsp;</span>
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
        <input type="checkbox" value="jump" class="mdl-checkbox__input element" checked="">Jumps
        <span class="mdl-checkbox__label" id="jumpColor" style="font-size: 20px; color: #1976D2;">amp;#9679;amp;nbsp;amp;nbsp;</span>
    </label>
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
        <input type="checkbox" value="spin" class="mdl-checkbox__input element" checked="">Spins
        <span class="mdl-checkbox__label" id="spinColor" style="font-size: 20px; color: #388E3C;">amp;#9679;amp;nbsp;amp;nbsp;</span>
    </label>
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
        <input type="checkbox" value="seq" class="mdl-checkbox__input element" checked="">Sequences
        <span class="mdl-checkbox__label" id="seqColor" style="font-size: 20px; color: #D81B60;">amp;#9679;amp;nbsp;amp;nbsp;</span>
    </label>
</style>
</div>
</body>

Фрагмент моего js-файла:

 d3.selectAll("input").on("change", filter);
    function filter() {

        function getCheckedBoxes(checkboxName) {

            let checkboxes = d3.selectAll(checkboxName).nodes();
            let checkboxesChecked = [];
            for (let i = 0; i < checkboxes.length; i  ) {
                if (checkboxes[i].checked) {
                    checkboxesChecked.push(checkboxes[i].defaultValue);
                }
            }
            return checkboxesChecked.length > 0 ? checkboxesChecked : null;
        }

        let checkedBoxes = getCheckedBoxes(".element");

        let newData = [];

        if (checkedBoxes == null) {
            dataSet = newData;
            draw();
            return;
        }

        for (let i = 0; i < checkedBoxes.length; i  ){
            let newArray = data.filter(function(d) {
                return d.element === checkedBoxes[i];
            });
            Array.prototype.push.apply(newData, newArray);
        }

        dataSet = newData;
        draw();
    }

Ответ №1:

Посмотрите на входные значения:

    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
        <input type="checkbox" value="Jumps" class="mdl-checkbox__input element" checked="">Jumps
        <span class="mdl-checkbox__label" id="jumpColor" style="font-size: 20px; color: #1976D2;">amp;#9679;amp;nbsp;amp;nbsp;</span>
    </label>
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
        <input type="checkbox" value="Spins" class="mdl-checkbox__input element" checked="">Spins
        <span class="mdl-checkbox__label" id="spinColor" style="font-size: 20px; color: #388E3C;">amp;#9679;amp;nbsp;amp;nbsp;</span>
    </label>
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
        <input type="checkbox" value="Sequences" class="mdl-checkbox__input element" checked="">Sequences
        <span class="mdl-checkbox__label" id="seqColor" style="font-size: 20px; color: #D81B60;">amp;#9679;amp;nbsp;amp;nbsp;</span>
    </label>

Комментарии:

1. Добро пожаловать в SO. Пожалуйста, объясните свой ответ более подробно. Люди (обычно) приходят сюда, чтобы учиться, а не просто получить ответ на копирование / вставку. Спасибо.