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

200

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?

javascript ajax svg d3.js Sami
fuente
66
github.com/mbostock/d3/wiki/Selections#wiki-remove
Felix Kling
1
@ Felix Kling Gracias :) la función remove de D3.js lo resolvió var svg1 = d3.select ("svg") .remove ();
Sami
1
puedes usard3.select("svg").empty();
csandreas1

Respuestas:

283

Aquí está la solución:

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

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

Sami
fuente
110
en realidad, si desea eliminar los elementos de SVG que sería mejor usar: svg.selectAll("*").remove();. Esto borra el contenido del elemento incluso si establece la svgvariable en un elemento de agrupación ( g).
Nux
44
@Nux por ti me voy a tiempo hoy. d3.html ('') no funciona en Safari.
glifo
Gracias, sin embargo, si elimino un gráfico e inmediatamente intento agregar uno nuevo, ¿no se agrega? Cualquier sugerencia, gracias.
codingbbq
El código anterior elimina todo el elemento svg que contiene el gráfico. necesitaría crear un nuevo elemento svg para agregar un nuevo gráfico, supongo.
Sami
Es extraño que el error Safari todavía exista. Deberían arreglar eso.
Tyguy7
149

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.

burce
fuente
9
Recomiendo esto si desea actualizar un gráfico. Retire a sus hijos y luego agregue los nuevos.
Matheus Araujo
Utilicé esta respuesta para resolver mi problema, esta respuesta borra todos los contenidos creados dentro de la etiqueta svg, y puedo actualizar mis gráficos después de borrar los contenidos
Hamed R
¿Esto eliminará los oyentes de eventos asociados, asignados a los niños en SVG?
Anuroop Pendela
58

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();

fuente
3
Esta es una solución mucho más segura / limpia que la seleccionada como respuesta. Al seleccionar svg usando id, se puede evitar estropear otros elementos de svg que puedan existir en la misma página. Por favor vota esto.
Quest Monger
Utilicé esto en el pasado y esta es una solución precisa. Agregar una identificación también documenta los nodos.
Christophe Roussy
31

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.

Stirling
fuente
6

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

Shailender Singh
fuente
6

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

$("#container_div_id").html("");
cjungel
fuente
12
No es una buena idea usar jQuery para la manipulación DOM cuando ya está utilizando una gran herramienta para este trabajo en D3. Especialmente si no tienes jQuery en uso.
Warren Reilly
4

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

Sprintstar
fuente