d3地图与复选框过滤 [英] d3 map with checkbox filtering
问题描述
我有一个d3符号映射,并希望用户能够通过称为类型的属性过滤点。有三种类型:a,b,c,每个都有一个关联的html复选框,当选中时应显示类型a的点,而未选中时,应删除那些点。我想知道什么最好的方式通过检查/取消选中事件到d3?我想如果有一种方法将检查类型传递给select.filter(),这将是最好的方法去。这是代码:
I have a made a d3 symbolic map and would like the user to be able to filter points by an attribute called 'type'. There are three types: a, b, c, each of which has an associated html checkbox, that when checked should display points of type a, and when un-checked should remove those points. I was wondering what the best way to pass the check/uncheck event into d3? I am thinking if there was a way to pass the checked types into a select.filter(), that would be the best way to go. Here is the 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); });;
目前,过滤器设置为捕获所有点:
Currently, the filter is set to catch all points:
.filter(function(d) { return d.properties.type != null ? this : null; })
我希望用户能够更改此设置。
I would like the user to be able to change this.
干杯
推荐答案
这样的东西应该可以工作。为您的复选框添加一个值属性,以便了解其引用的内容。
Something like this should work. Add a value attribute for your checkboxes so you know what they're referring to.
d3.selectAll(".filter_button").on("change", function() {
var type = this.value,
// I *think* "inline" is the default.
display = this.checked ? "inline" : "none";
svg.selectAll(".symbol")
.filter(function(d) { return d.properties.type === type; })
.attr("display", display);
});
这篇关于d3地图与复选框过滤的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!