5

d3シンボリックマップを作成しましたが、ユーザーが「type」という属性でポイントをフィルタリングできるようにしたいと考えています。3つのタイプがあります：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; })

ユーザーがこれを変更できるようにしたいと思います。

乾杯

4

1 に答える 1

5

このようなものが機能するはずです。チェックボックスにvalue属性を追加して、チェックボックスが何を参照しているかがわかるようにします。

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);
});
于 2013-02-23T19:59:28.613 に答える