Question

<body>
    <button type="button" id="changeButton" onClick="hide(this)">Hide</button><br>
    <br>
    <object data="graphdata.svg" id="myGraph">graph</object>

<script src="d3.js" charset="utf-8"></script>
<script>
    state="visible";
    function hide(button) {


        console.log(d3.select("body").select("#myGraph").select("svg")); // ??
        if (state=="visible") { value="none"; state="invisible"; }
        else { value=""; state="visible"; }

        button.firstChild.data = state=="visible" ? "Hide" : "Unhide";
    }
</script>
</body>

有问题的SVG是here。

基本结构是

<svg>
    <g id="edges"></g>
    ....
    <g id="node-labels">
        <text class="thing1"></text>
        <text class="thing2"></text>
        ....
        </g>
</svg>

我正在尝试选择SVG元素，因此我可以将属性“display”设置为“none”，但我所做的每次尝试都会从.select()返回一个null元素。

Answer 1

正如其名称所示，D3使用的DOM选择器仅限于您所在的特定DOM。通过嵌入这样的SVG，您最终会得到一个新的独立DOM。选择器不会遍历DOM边界，但您可以选择新DOM的根元素，更改为它并在那里运行您的选择器。代码看起来像这样。

d3.select(document.getElementById("#myGraph").documentElement).select("svg");

使用d3j选择嵌入式SVG文件中的元素

1 个答案: