Page in question: https://3milychu.github.io/met-erials
Goal:
- I have multiple checkboxes, they need to update a dataset filter upon selection
- Each time a checkbox is checked, an update function should run to see which checkboxes are checked, and filter the data accordingly.
The html:
<!-- Selector -->
<div id="selector">
<form>
<label onclick="showTile()">All<input class="radio-custom" type="checkbox" name="dataset" id="dataset" value="All" checked></label>
<label onclick="showTile()">Wood<input class="radio-custom" type="checkbox" name="dataset" id="dataset" value="hasWood"></label>
<label onclick="showTile()">Silk<input class="radio-custom" type="checkbox" name="dataset" id="dataset" value="hasSilk"></label>
<label onclick="showTile()">Ink<input class="radio-custom" type="checkbox" name="dataset" id="dataset" value="hasInk"></label>
<label onclick="showTile()">Silver<input class="radio-custom" type="checkbox" name="dataset" id="dataset" value="hasSilver"></label>
<label onclick="showTile()">Glass<input class="radio-custom" type="checkbox" name="dataset" id="dataset" value="hasGlass"></label>
<label onclick="showTile()">Steel<input class="radio-custom" type="checkbox" name="dataset" id="dataset" value="hasSteel"></label>
<label onclick="showTile()">Gold<input class="radio-custom" type="checkbox" name="dataset" id="dataset" value="hasGold"></label>
</form>
</div>
The js:
d3.select("input[value=\"All\"]").property("checked", true);
d3.selectAll("input").on("change", update);
update(data);
function update(dataset) {
// change dataset to selected dataset
d3.selectAll(".radio-custom").each(function(d){
cb = d3.select(this);
if(cb.property("checked")){
newData = dataset.filter(function(d,i){return d.this== 1;});
}
});
};
Aucun commentaire:
Enregistrer un commentaire