d3.js 확인란으로 필터링

Question

d3으로 확인란을 사용하여 일부 요소를 필터링하려고하는데 행운이 없으며 찾은 예제 중 일부를 실제로 이해하지 못합니다 (예, m 총 멍청한 놈).

내가하고 싶은 일은 ID를 체크 박스의 값과 비교하여 일부 svg를 표시하거나 숨기는 것입니다.

HTML

<form> 
<input type="checkbox" value="value1" class="check" checked> 
<label> 
    value1 
</label> 
<input type="checkbox" value="value2" class="check" checked> 
<label> 
    value2 
</label> 
... 
</form> 

D3

var svg = d3.select("div#target") 
     .selectAll("svg") 
     .data(dataset) 
     .enter() 
     .append("svg") 
     .attr({ 
      width: width + margin.left + margin.right, 
      height: height + margin.top + margin.bottom, 
      id: function(d) { 
       return d.id; 
      } 
     }) 
     .append("g") 
     .attr({ 
      transform: "translate(" + margin.left + ", " + margin.top + ")" 
     }); 

이 할 수있는 방법이 있습니까?

Answer 1

<input type="checkbox" value="value2" class="check" onclick="hideSVG('SVGid')" checked> 

<svg id='SVGid'></svg> 

function hideSVG(inValue) { 
    if(d3.select("#"+inValue).style("display") == "none") { 
     d3.select("#"+inValue).style("display", "block") 
    } 
    else { 
     d3.select("#"+inValue).style("display", "none") 
    } 
} 

이 기능은 SVG가 표시되는지 확인하고 SVG가 표시되지 않는 경우 표시를 설정합니다. "인라인"과 같은 다른 디스플레이를 사용하는 경우 "블록"을 "인라인"으로 변경하십시오.