I have viz with three checkboxes working as filters and displayed circles according to the group (see picture below) 
In my work I use draw function to visualize all data. Problem is when I click on any checkbox, viz disappears and don't redraw. Can you help to find error here?
Snippet of my html-file:
<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>
Snippet of my js-file:
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();
}
Aucun commentaire:
Enregistrer un commentaire