d3.js фильтрация с флажками

Question

Я пытаюсь отфильтровать некоторые элементы с помощью d3 с помощью флажков, но мне не повезло, и я действительно не понимаю некоторые из примеров, которые я нашел (да, м общий нуб).

Вещь, которую я хочу сделать, это отобразить или скрыть некоторые svgs, сравнив их идентификатор со значением флажков.

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 и устанавливает дисплей на ни, если он есть, или заблокировать, если это не так. Если вы используете другой дисплей (например, «встроенный»), просто измените «блок» на «встроенный».