Cross filtering with multiple checkbox categories in d3
14:14 28 Dec 2018

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
Regus
Spaces
//"Broker" checkboxes //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?

javascript jquery d3.js checkbox