Come posso rimuovere o sostituire il contenuto SVG?

Ho un pezzo di codice JavaScript che crea (usando D3.js) un svgelemento che contiene un grafico. Voglio aggiornare il grafico in base ai nuovi dati provenienti da un servizio Web utilizzando AJAX, il problema è che ogni volta che faccio clic sul pulsante di aggiornamento, genera un nuovosvg , quindi desidero rimuovere quello vecchio o aggiornarne il contenuto.

Ecco uno snippet della funzione JavaScript in cui creo svg:

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

Come posso rimuovere il vecchio svgelemento o almeno sostituirne il contenuto?

Ecco la soluzione:

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

Questa è una removefunzione fornita da D3.js.

Se vuoi sbarazzarti di tutti i bambini,

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

rimuoverà tutto il contenuto associato allo svg.

Nota : questo è consigliato nel caso in cui si desideri aggiornare il grafico.

L'impostazione dell'attributo id quando si aggiunge l'elemento svg può anche consentire a d3 di selezionare, quindi rimuovere () più avanti su questo elemento per id:

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

...

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

Ho avuto due grafici.

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

Ciò ha rimosso tutti i grafici.

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

Questo ha funzionato per la rimozione del grafico a barre esistente, ma dopo non ho potuto aggiungere nuovamente il grafico a barre

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

Ho provato questo. Non solo mi consente di rimuovere il grafico a barre esistente, ma anche di aggiungere nuovamente un nuovo grafico a barre.

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 + ')');

Non sono sicuro se questo è il modo corretto per rimuovere e aggiungere nuovamente un grafico in d3. Ha funzionato in Chrome, ma non è stato testato in IE.

Sto usando SVG usando D3.js e ho avuto lo stesso problema.

Ho usato questo codice per rimuovere il precedente svg ma il gradiente lineare all'interno di SVG non arrivava in IE

$ ( "# Container_div_id") html ( "");

quindi ho scritto il codice seguente per risolvere il problema

$('container_div_id g').remove();
$('#container_div_id path').remove();

qui sto rimuovendo il precedente ge il percorso all'interno del SVG, sostituendo con quello nuovo.

Mantenendo il mio gradiente lineare all'interno dei tag SVG nel contenuto statico e quindi ho chiamato il codice sopra, Funziona in IE

Puoi anche usare jQuery per rimuovere il contenuto del div che contiene il tuo svg.

$("#container_div_id").html("");

Dovresti usare append("svg:svg"), non in append("svg")modo che D3 crei l'elemento con lo 'spazio dei nomi' corretto se stai usando xhtml.