¿Cómo puedo eliminar o reemplazar el contenido SVG?

Tengo un fragmento de código JavaScript que crea (usando D3.js) un svgelemento que contiene un gráfico. Quiero actualizar el gráfico en función de los nuevos datos provenientes de un servicio web que utiliza AJAX, el problema es que cada vez que hago clic en el botón de actualización, genera uno nuevo svg, por lo que quiero eliminar el antiguo o actualizar su contenido.

Aquí hay un fragmento de la función JavaScript donde creo el svg:

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

¿Cómo puedo eliminar el svgelemento antiguo o al menos reemplazar su contenido?

Aquí está la solución:

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

Esta es una removefunción proporcionada por D3.js.

Si quieres deshacerte de todos los niños,

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

eliminará todo el contenido asociado con el svg.

Nota : Esto se recomienda en caso de que desee actualizar el gráfico.

Establecer el atributo id al agregar el elemento svg también puede permitir que d3 seleccione, así que remove () más adelante en este elemento por id:

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

...

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

Tenía dos cartas

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

Esto eliminó todos los gráficos.

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

Esto funcionó para eliminar el gráfico de barras existente, pero luego no pude volver a agregar el gráfico de barras después

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

Intenté esto. No solo me permite eliminar el gráfico de barras existente, sino que también me permite volver a agregar un nuevo gráfico de barras.

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

No estoy seguro de si esta es la forma correcta de eliminar y volver a agregar un gráfico en d3. Funcionó en Chrome, pero no lo he probado en IE.

Estoy usando el SVG usando D3.js y tuve el mismo problema.

Utilicé este código para eliminar el svg anterior, pero el gradiente lineal dentro de SVG no llegaba en IE

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

luego escribí el siguiente código para resolver el problema

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

Aquí estoy eliminando el g y la ruta anteriores dentro del SVG, reemplazando con el nuevo.

Manteniendo mi gradiente lineal dentro de las etiquetas SVG en el contenido estático y luego llamé al código anterior, esto funciona en IE

También puede usar jQuery para eliminar el contenido del div que contiene su svg.

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

Debe usar append("svg:svg"), no append("svg")para que D3 haga el elemento con el "espacio de nombres" correcto si está usando xhtml.