javascript - Hur kan jag ta bort eller ersätta SVG-innehåll?

Jag har en bit JavaScript-kod som skapar (med D3.js) ett svg-element som innehåller ett diagram. Jag vill uppdatera diagrammet baserat på ny data som kommer från en webbtjänst med AJAX, problemet är att varje gång jag klickar på uppdateringsknappen genereras ett nytt svg, så jag vill ta bort det gamla eller uppdatera dess innehåll.

Här är ett utdrag från JavaScript-funktionen där jag skapar svg:

var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

Hur kan jag ta bort det gamla svg-elementet eller åtminstone ersätta dess innehåll?

Svar #1

Här är lösningen:

d3.select("svg").remove();

Detta är en remove-funktion som tillhandahålls av D3.js.

Svar #2

Om du vill bli av med alla barn,

svg.selectAll("*").remove();

kommer att ta bort allt innehåll som är kopplat till svg:n.

Svar #3

Att sätta id-attributet när man lägger till svg-elementet kan också låta d3 välja och sedan använda remove() på detta element efter id:

var svg = d3.select("theParentElement").append("svg")
.attr("id","the_SVG_ID")
.attr("width",...

...

d3.select("#the_SVG_ID").remove();

Svar #4

Jag hade två diagram.

<div id="barChart"></div>
<div id="bubbleChart"></div>

Detta tog bort alla diagram.

d3.select("svg").remove();

Detta fungerade för att ta bort det befintliga stapeldiagrammet, men då kunde jag inte lägga till stapeldiagrammet igen efteråt

d3.select("#barChart").remove();

Provade detta. Det lät mig inte bara ta bort det befintliga stapeldiagrammet, utan också lägga till ett nytt stapeldiagram igen.

d3.select("#barChart").select("svg").remove();

var svg = d3.select('#barChart')
       .append('svg')
       .attr('width', width + margins.left + margins.right)
       .attr('height', height + margins.top + margins.bottom)
       .append('g')
       .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');

Inte säker på om detta är rätt sätt att ta bort och lägga till ett diagram igen i d3. Det fungerade i Chrome, men har inte testat i IE.

Relaterade artiklar