체크 박스 필터링을 사용하는 d3지도

Question

나는 d3 상징 맵을 만들었으며 사용자는 '유형'이라는 속성으로 포인트를 필터링 할 수 있기를 원합니다. 세 가지 유형이 있습니다 : a, b, c 각각은 연관된 html 체크 박스를 가지고, 체크되었을 때 a 유형의 포인트를 표시해야하고, un-checked는 해당 포인트를 제거해야합니다. 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; }) 

을 여기에 코드입니다 이걸 바꿀 수 있어요.

건배

Answer 1

이와 비슷한 기능이 작동합니다. 체크 박스에 값 속성을 추가하여 참조하는 내용을 확인하십시오.

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); 
});