CODEWITHSUNDEEP
javascripthtmld3.jssvg
user3709119
user3709119

Reputation: 107

Not able to remove all D3 SVG elements

I'm trying to remove all children of my SVG element and I'm having issues removing lines. When I have text and circles in my SVG element, I can easily wipe them with the command d3.select("#id_svg-graph").selectAll("*").remove(). However, I recently added lines to my SVG element and they persist even after this command. Is there any reason for this?

This is the SVG before the command:

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

And after the command:

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

EDIT:

I'm not sure why the line's and circle's don't have an end bracket, but they've been working fine so far. I use D3 to generate the elements, so I never actually write the code that is shown above.

I've also tried changing the name to not have a '-', but it didn't change the problem any... and it seemed to work just fine with the '-' in, so I kept it.

The problem is that only the line elements aren't disappearing. Even after specifying the lines explicitly with d3.select("#id_svg-graph").selectAll("line").remove(), they still persist.

I'm using Firefox 45.2.0 if that might help diagnose what's happening here.

Upvotes: 0

Views: 392

Answers (1)

Francis Hemsher
Francis Hemsher

Reputation: 3498

The id for the svg root is not valid. Try removing the dash 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>

Upvotes: 3

Related Questions