Ho creato una mappa simbolica d3 e vorrei che l'utente fosse in grado di filtrare i punti con un attributo chiamato 'tipo'. Esistono tre tipi: a, b, c, ognuno dei quali ha una casella di controllo html associata, che quando selezionato deve visualizzare punti di tipo a, e quando non spuntato dovrebbe rimuovere quei punti. Mi stavo chiedendo quale sia il modo migliore per passare l'evento check/descheck in d3? Sto pensando se ci fosse un modo per passare i tipi selezionati in un select.filter(), sarebbe il modo migliore per andare. Ecco il codice:d3 mappa con filtro casella di controllo
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); });;
Attualmente, il filtro è impostato per catturare tutti i punti:
.filter(function(d) { return d.properties.type != null ? this : null; })
vorrei che l'utente sia in grado di cambiare questo.
Cheers
incredibile. Grazie. funziona come un incantesimo quando le caselle sono spuntate, ma deselezionando non rimuove i punti. qualche idea sul perché sarebbe? – rysloan
salvavita. Grazie. – rysloan
Sicuro. Hai ottenuto deselezionando per lavorare poi? –