Question

我想使用两种不同的复选框类别在d3映射中过滤数据，一种用于“承租人”，一种用于“经纪人”。我可以单独按任一类别成功过滤，但是我遇到的问题是使两个过滤器一起使用。例如，如果我在一个类别中重新选中一个框，它将带回该类别的所有数据，而不管在另一个类别中已选中/未选中的内容。我想一次过滤多个类别的数据。这是我的代码：

//"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);
            });

是否有一种方法可以保留此通用逻辑，同时允许d3同时按这两个类别进行过滤？预先感谢。

在D3中使用多个复选框类别进行交叉过滤

0 个答案: