Mam stworzoną mapę symboliczną d3 i chciałbym, aby użytkownik mógł filtrować punkty według atrybutu o nazwie "typ". Istnieją trzy typy: a, b, c, z których każda ma przypisane pole wyboru html, które po zaznaczeniu powinno wyświetlać punkty typu a, a gdy niezaznaczone powinno usuwać te punkty. Zastanawiam się, jaki najlepszy sposób przekazania zdarzenia check/uncheck do d3? Zastanawiam się, czy istnieje sposób przekazania sprawdzonych typów do select.filter(), to byłby najlepszy sposób, aby przejść. Oto kod:Mapa d3 z filtrowaniem pól wyboru
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, aby złapać wszystkie punkty:
.filter(function(d) { return d.properties.type != null ? this : null; })
Chciałbym użytkownika, aby być w stanie to zmienić.
Cheers
niesamowite. dzięki. działa jak czar, gdy pola są zaznaczone, ale odznaczenie nie usuwa punktów. jakiekolwiek przemyślenia na temat tego, dlaczego tak się stało? – rysloan
ratownik. dzięki. – rysloan
Pewnie. Czy wtedy odznaczałeś się do pracy? –