文章/答案/技术大牛

发布

社区首页 >问答首页 >带滤波器的D3_Redraw图

问带滤波器的D3_Redraw图
EN

Stack Overflow用户

提问于 2020-10-04 14:01:04

回答 1查看 50关注 0票数 0

我有三个复选框作为过滤器，并根据组显示圆圈(见下图)。

在我的工作中，我使用draw函数来可视化所有数据。问题是，当我点击任何复选框，即消失和不重画。你能帮我找出错误吗？

我的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:&nbsp;&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;">&#9679;&nbsp;&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;">&#9679;&nbsp;&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;">&#9679;&nbsp;&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();
    }

html

d3.js

checkbox

filter

listener

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-09 14:54:07

查看输入值：

   <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;">&#9679;&nbsp;&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;">&#9679;&nbsp;&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;">&#9679;&nbsp;&nbsp;</span>
    </label>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64195563

复制

相似问题

问带滤波器的D3_Redraw图
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带滤波器的D3_Redraw图EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带滤波器的D3_Redraw图
EN