Ich habe eine symbolische d3-Karte erstellt und möchte, dass der Benutzer Punkte nach einem Attribut namens "Typ" filtern kann. Es gibt drei Typen: a, b, c, denen jeweils ein HTML-Kontrollkästchen zugeordnet ist. Wenn dieses Kontrollkästchen aktiviert ist, werden Punkte vom Typ a angezeigt, und wenn es deaktiviert ist, werden diese Punkte entfernt. Ich habe mich gefragt, wie ich das Ereignis check / uncheck am besten in d3 übergeben kann. Ich denke, wenn es einen Weg gäbe, die markierten 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 ist der Filter so eingestellt, dass alle Punkte erfasst werden:

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

Ich möchte, dass der Benutzer dies ändern kann.

Prost