Question

我正在尝试删除SVG元素的所有子元素，并且在删除lines时遇到问题。当我的SVG元素中有text和circles时，我可以使用命令d3.select("#id_svg-graph").selectAll("*").remove()轻松擦除它们。但是，我最近在我的SVG元素中添加了行，并且即使在此命令之后它们仍然存在。这有什么理由吗？

这是命令前的SVG：

<svg id="id_svg-graph" style="height:100%;width:100%;" width="1522" height="407">
    <line style="stroke: black;" x1="823" y1="183" x2="660" y2="156">
    <circle style="fill: chartreuse; stroke: gold;" r="20" cx="660" cy="156">
    <circle style="fill: chartreuse; stroke: black;" r="20" cx="823" cy="183">
    <text style="-moz-user-select: none;" text-anchor="middle" x="660" y="156">0</text>
    <text style="-moz-user-select: none;" text-anchor="middle" x="823" y="183">1</text>
</svg>

在命令之后：

<svg id="id_svg-graph" style="height:100%;width:100%;" width="1522" height="407">
    <line style="stroke: black;" x1="823" y1="183" x2="660" y2="156">
</svg>

编辑：

我不确定为什么直线和圆圈没有端支架，但到目前为止它们一直工作正常。我使用D3来生成元素，所以我从来没有真正编写上面显示的代码。

我也尝试过将名称更改为没有' - '，但它并没有改变任何问题...而且它似乎与' - '一样好用，所以我保留了它。

问题是只有线元素不会消失。即使用d3.select("#id_svg-graph").selectAll("line").remove()明确指定了行，它们仍然存在。

我正在使用Firefox 45.2.0，如果这可能有助于诊断这里发生的事情。

Answer 1

svg root的id无效。尝试删除短划线 e.g：

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>

<body>
 <svg id="id_svgGraph" style="height:100%;width:100%;" width="1522" height="407">
<line style="stroke: black;" x1="823" y1="183" x2="660" y2="156">
<circle style="fill: chartreuse; stroke: gold;" r="20" cx="660" cy="156">
<circle style="fill: chartreuse; stroke: black;" r="20" cx="823" cy="183">
<text style="-moz-user-select: none;" text-anchor="middle" x="660" y="156">0</text>
<text style="-moz-user-select: none;" text-anchor="middle" x="823" y="183">1</text>
</svg>
<script>
d3.select("#id_svgGraph").selectAll("*").remove()
console.log(new XMLSerializer().serializeToString(id_svgGraph))
</script>
</body>
</html>

无法删除所有D3 SVG元素

1 个答案: