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

Question

Tengo un fragmento de código JavaScript que crea (utilizando D3.js) un elemento svg 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 un nuevo svg, por lo que quiero eliminar el anterior o actualizar su contenido.

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

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

¿Cómo puedo eliminar el viejo svg elemento o al menos reemplaza su contenido?

Answer 1

Aquí está la solución:

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

Esta es una función remove proporcionada por D3.js.

Answer 2

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

Answer 3

También podría utilizar jQuery para eliminar el contenido del div que contiene su svg.

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

Answer 4

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

He utilizado este código para la eliminación de la SVG anterior pero el gradiente lineal dentro de SVG no venían en el IE

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

luego me escribió el siguiente código para resolver el problema

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

aquí yo estoy quitando el G anterior y la ruta en el interior del SVG, en sustitución por uno nuevo.

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

Answer 5

Ajuste del atributo id al anexar el elemento SVG también puede dejar D3 seleccionar por lo quite() más tarde 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(); 

Answer 6

Tenía dos gráficos.

<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 entonces no podría volver a agregar el gráfico de barras después de

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

probado este. No solo me permite eliminar el gráfico de barras existente, sino también permitirme 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 ha probado en IE.

Answer 7

Si desea deshacerse de todos los niños,

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

eliminará todo el contenido asociado con el SVG.