Mam utworzoną mapę symboliczną d3 i chciałbym, aby użytkownik mógł filtrować punkty za pomocą atrybutu o nazwie „typ”. Istnieją trzy typy: a, b, c, z których każdy ma powiązane pole wyboru html, które po zaznaczeniu powinno wyświetlać punkty typu a, a po odznaczeniu należy usunąć te punkty. Zastanawiałem się, jaki jest najlepszy sposób na przekazanie zdarzenia check / uncheck do d3? Myślę, że jeśli istnieje sposób na przekazanie sprawdzonych typów do select.filter (), to byłby najlepszy sposób. Oto kod:

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

Obecnie filtr jest ustawiony na przechwytywanie wszystkich punktów:

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

Chciałbym, aby użytkownik mógł to zmienić.

Twoje zdrowie