Перекрестная фильтрация с несколькими категориями флажков в d3 - PullRequest
0 голосов
/ 28 декабря 2018

Я хотел бы отфильтровать данные в карте 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 фильтровать по обеим этим категориям одновременно?Заранее спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...