I would like to filter data in a d3 map using two different checkbox categories, one for "tenant" and one for "broker". I can filter successfully by either category by itself, but the issue I'm having is getting both filters to work together. For example, if I re-check a box in one category it will bring back all the data for that category, regardless of what is checked/unchecked in the other category. I'd like to filter data on multiple categories at once. Here's my code:
//"Tenant" checkboxes
<div class="Regus" style="margin-right:30px; margin-
top:13px">Regus
<input class ='tenantcheck' type="checkbox"
id="RegusCheckbox" checked/>
<label for="RegusCheckbox"></label>
</div>
<div class="Spaces" style="margin-right:30px; margin-top:13px">Spaces
<input class ='tenantcheck' type="checkbox" id="SpacesCheckbox" checked/>
<label for="SpacesCheckbox"></label>
</div>
//"Broker" checkboxes
<label class="container" >CBRE
<input class ='agencyBrokerCheck' type="checkbox" id="CBRECheckbox" checked >
<span class="checkmark"></span>
</label>
<label class="container" >Colliers
<input class ='agencyBrokerCheck' type="checkbox"
id="ColliersCheckbox" checked >
<span class="checkmark"></span>
</label>
//Filter by "Tenant"
d3.selectAll("#RegusCheckbox").on("change", function() {
var type = "Regus"
display = this.checked ? "inline" : "none";
d3.selectAll(".features")
.filter(function(d) { return d.properties.Tenant === type; })
.attr("display", display);
});
d3.selectAll("#SpacesCheckbox").on("change", function() {
var type = "Spaces"
display = this.checked ? "inline" : "none";
d3.selectAll(".features")
.filter(function(d) { return d.properties.Tenant === type; })
.attr("display", display);
});
//And, filter by "Broker"
d3.selectAll("#CBRECheckbox").on("change", function() {
var type = "CBRE"
display = this.checked ? "inline" : "none";
d3.selectAll(".features")
.filter(function(d) { return d.properties.Agency_Bro === type; })
.attr("display", display);
});
d3.selectAll("#ColliersCheckbox").on("change", function() {
var type = "Colliers International"
display = this.checked ? "inline" : "none";
d3.selectAll(".features")
.filter(function(d) { return d.properties.Agency_Bro === type; })
.attr("display", display);
});
Is there a way to keep this general logic while allowing d3 to filter by both these categories at once? Thanks in advance.
Aucun commentaire:
Enregistrer un commentaire