如何解决D3_带过滤器的重绘图表
在我的工作中,我使用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: </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;">● </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;">● </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;">● </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();
}
解决方法
输入值:
<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;">● </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;">● </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;">● </span>
</label>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。