У меня есть символическая карта d3 и вы хотите, чтобы пользователь мог фильтровать точки по атрибуту «тип». Существует три типа: a, b, c, каждый из которых имеет связанный с ним html флажок, который при проверке должен отображать точки типа a, а когда не проверять, следует удалить эти точки. Мне было интересно, что лучший способ передать событие check/uncheck в d3? Я думаю, если бы был способ передать проверенные типы в select.filter(), это было бы лучшим способом. Вот код:d3 map with checkbox filtering
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); });;
В настоящее время фильтр установлен, чтобы поймать все пункты:
.filter(function(d) { return d.properties.type != null ? this : null; })
Я хотел бы, чтобы пользователь способный изменить это.
Cheers
изумительный. Благодарю. работает как шарм, когда флажки проверены, но снятие отметки не удаляет точки. любые мысли о том, почему это было бы? – rysloan
спасательный жилет. Благодарю. – rysloan
Обязательно. Вы уклонялись от работы? –