Question

我正在尝试使用复选框用d3过滤一些元素，但我没有运气，而且我真的不明白我找到的一些例子（是的，我是一个总菜鸟）。

我想要做的是通过将他们的id与复选框的值进行比较来显示或隐藏一些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是否正在显示，如果是，则将显示设置为none，如果不显示则设置为block。如果您使用的是其他显示器（例如“内联”），则只需将“阻止”更改为“内联”。

d3.js过滤复选框

1 个答案: