d3 Karte mit Checkbox Filterung

Question

Ich habe eine eine d3 symbolische Karte gemacht und würde den Benutzer möchte in der Lage sein, Punkte genannt durch ein Attribut zu filtern ‚Typ‘. Es gibt drei Typen: a, b, c, von denen jeder eine zugeordnete HTML-Ankreuzfeld hat, dass, wenn überprüft sollte Punkte vom Typ einer Anzeige, und als nicht-geprüft sollten diese Punkte entfernen. Ich habe mich gefragt, was ist der beste Weg, um das Check/Uncheck-Event in d3 zu übergeben? Ich denke, wenn es eine Möglichkeit gäbe, die überprüften Typen in ein select.filter() zu übergeben, wäre das der beste Weg. Hier ist der Code:

HTML

<div class="filter_options"> 
<input class="filter_button" id="a_button" type="checkbox">a</input><br> 
<input class="filter_button" id="b_button" type="checkbox">b</input><br> 
<input class="filter_button" id="c_button" type="checkbox">c</input><br> 
</div> 

js

queue() 
.defer(d3.json, "basemap.json") 
.defer(d3.json, "points.json") 
.await(ready); 

function ready(error, base, points) { 

var button = 

svg.append("path") 
    .attr("class", "polys") 
    .datum(topojson.object(us, base.objects.polys)) 
    .attr("d", path); 

svg.selectAll(".symbol") 
    .data(points.features) 
.enter().append("path") 
    .filter(function(d) { return d.properties.type != null ? this : null; }) 
    .attr("class", "symbol") 
    .attr("d", path.pointRadius(function(d) { return radius(d.properties.frequency * 50000); })) 
    .style("fill", function(d) { return color(d.properties.type); });; 

Derzeit wird der Filter gesetzt, alle Punkte zu fangen:

.filter(function(d) { return d.properties.type != null ? this : null; }) 

ich den Benutzer sein möchte kann das ändern.

Prost

Answer 1

So etwas sollte funktionieren. Fügen Sie ein Wertattribut für Ihre Kontrollkästchen hinzu, damit Sie wissen, worauf sie sich beziehen.

d3.selectAll(".filter_button").on("change", function() { 
    var type = this.value, 
    // I *think* "inline" is the default. 
    display = this.checked ? "inline" : "none"; 

    svg.selectAll(".symbol") 
    .filter(function(d) { return d.properties.type === type; }) 
    .attr("display", display); 
});