d3.js用複選框過濾

Question

我想用d3過濾一些元素使用複選框，但我沒有任何運氣，我真的不明白我發現的一些例子（是的，總共noob）。

我想要做的事情是顯示或隱藏一些svgs通過比較他們的id和複選框的值。

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和設置顯示爲無，如果它是，或阻斷，如果它不是。如果您使用不同的顯示器（如「內聯」），那麼只需將「block」更改爲「inline」即可。