1

我正在尝试使用复选框过滤一些带有 d3 的元素，但我没有任何运气，而且我并不真正理解我找到的一些示例（是的，我完全是菜鸟）。

我想做的事情是通过将它们的 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 + ")"
        });

有没有办法做到这一点？

4

1 回答 1

0 
 <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，如果是，则将显示设置为无，如果不是，则将其设置为块。如果您使用不同的显示（如“内联”），那么只需将“块”更改为“内联”。

于 2013-05-20T00:34:30.417 回答