我制作了一个 d3 符号 map ,希望用户能够通过名为“类型”的属性过滤点。共有三种类型:a、b、c,每种类型都有一个关联的 html 复选框,选中时应显示类型 a 的点,取消选中时应删除这些点。我想知道将检查/取消检查事件传递到 d3 的最佳方法是什么?我在想是否有办法将选中的类型传递给 select.filter(),那将是最好的方法。这是代码:
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; })
我希望用户能够更改它。
干杯
最佳答案
像这样的东西应该可以工作。为您的复选框添加一个值属性,这样您就知道它们指的是什么。
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);
});
关于javascript - 带复选框过滤的 d3 map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15044385/