samedi 17 février 2018

Updating dataset filter using multiple checkbox selection in d3

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