Como posso remover ou substituir o conteúdo SVG?

Eu tenho um pedaço de código JavaScript que cria (usando D3.js) um svgelemento que contém um gráfico. Quero atualizar o gráfico com base em novos dados provenientes de um serviço da Web usando AJAX, o problema é que cada vez que clico no botão de atualização, ele gera um novo svg, por isso quero remover o antigo ou atualizar seu conteúdo.

Aqui está um trecho da função JavaScript onde eu crio o svg:

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

Como posso remover o svgelemento antigo ou pelo menos substituir seu conteúdo?

Aqui está a solução:

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

Esta é uma removefunção fornecida pelo D3.js.

Se você quer se livrar de todas as crianças,

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

irá remover todo o conteúdo associado ao svg.

Nota : Isso é recomendado caso você queira atualizar o gráfico.

A configuração do atributo id ao anexar o elemento svg também pode permitir que o d3 selecione, então remova () posteriormente neste elemento por id:

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

...

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

Eu tinha dois gráficos.

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

Isso removeu todos os gráficos.

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

Isso funcionou para remover o gráfico de barras existente, mas não foi possível adicionar novamente o gráfico de barras depois

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

Tentei isso. Além de permitir a remoção do gráfico de barras existente, também é possível adicionar novamente um novo 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 + ')');

Não tenho certeza se essa é a maneira correta de remover e adicione novamente um gráfico no d3. Funcionou no Chrome, mas não foi testado no IE.

Estou usando o SVG usando o D3.js. e tive o mesmo problema.

Eu usei esse código para remover o svg anterior, mas o gradiente linear dentro do SVG não estava chegando no IE

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

então eu escrevi o código abaixo para resolver o problema

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

Aqui estou removendo o caminho e o caminho anterior dentro do SVG, substituindo pelo novo.

Mantendo meu gradiente linear dentro das tags SVG no conteúdo estático e depois chamei o código acima, funciona no IE

Você também pode usar o jQuery para remover o conteúdo da div que contém o seu svg.

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

Você deve usar append("svg:svg"), não append("svg")para que o D3 crie o elemento com o 'namespace' correto, se você estiver usando xhtml.