tablas - obtener datos de una tabla html javascript

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

Question

Tengo un fragmento de código JavaScript que crea (usando 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 elemento svg o al menos reemplazar su contenido?

Answer 1

Aquí está la solución:

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

Esta es una función de remove provista por D3.js.

Answer 2

Debería usar append("svg:svg") , no append("svg") para que D3 haga del elemento el "espacio de nombres" correcto si está utilizando xhtml.

Answer 3

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

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

Answer 4

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 venía 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 la ruta g anterior dentro del SVG, reemplazando con la nueva.

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

Answer 5

Si quieres deshacerte de todos los niños,

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

eliminará todo el contenido asociado con el svg.

Answer 6

También puedes usar jQuery para eliminar el contenido del div que contiene tu svg.

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

Answer 7

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 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.