gpt4 book ai didi

javascript - 无法删除所有 D3 SVG 元素

转载 作者:行者123 更新时间:2023-11-28 18:27:25 25 4
gpt4 key购买 nike

我正在尝试删除 SVG 元素的所有子元素,但在删除 lines 时遇到问题。当我的 SVG 元素中有 textcircles 时,我可以使用命令 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,如果这可以帮助诊断这里发生的情况。

最佳答案

svg 根的 ID 无效。尝试删除破折号例如:

<!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>

关于javascript - 无法删除所有 D3 SVG 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38861453/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com