web-dev-qa-db-fra.com

Comment puis-je supprimer ou remplacer le contenu SVG?

J'ai un morceau de code JavaScript qui crée (en utilisant D3.js) un élément svg qui contient un graphique. Je souhaite mettre à jour le graphique en fonction de nouvelles données provenant d'un service Web utilisant AJAX. Le problème est que chaque fois que je clique sur le bouton de mise à jour, un nouveau svg est généré. Je souhaite donc supprimer l'ancien ou mettre à jour son contenu.

Voici un extrait de la fonction JavaScript où je crée la svg:

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

Comment puis-je supprimer l'ancien élément svg ou au moins en remplacer le contenu?

javascriptajaxsvgd3.js
186
Sami

Voici la solution:

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

C'est une fonction remove fournie par D3.js.

260
Sami

Si vous voulez vous débarrasser de tous les enfants,

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

supprimera tout le contenu associé au svg.

Note: Ceci est recommandé si vous souhaitez mettre à jour le graphique.

134
burce

La définition de l’attribut id lors de l’ajout de l’élément svg peut également permettre à d3 de le sélectionner afin que remove () apparaisse plus tard sur cet élément avec id:

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

...

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

J'ai eu deux cartes.

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

Cela a supprimé toutes les cartes.

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

Cela a fonctionné pour supprimer le graphique à barres existant, mais je ne pouvais pas ensuite ré-ajouter le graphique à barres après

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

J'ai essayé ça. Cela me permet non seulement de supprimer le graphique à barres existant, mais également de rajouter un nouveau graphique à barres.

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

Vous ne savez pas si c'est la bonne façon de supprimer et d'ajouter de nouveau un graphique dans d3. Cela a fonctionné dans Chrome, mais n'a pas testé dans IE.

28
Stirling

Vous pouvez également simplement utiliser jQuery pour supprimer le contenu de la div qui contient votre svg.

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

J'utilise le SVG en utilisant D3.js et j'ai eu le même problème.

J'ai utilisé ce code pour supprimer le svg précédent, mais le dégradé linéaire à l'intérieur de SVG ne venait pas dans IE

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

alors j'ai écrit le code ci-dessous pour résoudre le problème

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

ici, je supprime le g et le chemin précédents à l'intérieur du SVG, en les remplaçant par le nouveau.

Garder mon dégradé linéaire à l'intérieur des balises SVG dans le contenu statique, puis j'ai appelé le code ci-dessus. Cela fonctionne dans IE.

6
Shailender Singh

Vous devez utiliser append("svg:svg") et non append("svg") pour que D3 crée l'élément avec le '' espace de noms '' correct si vous utilisez xhtml.

4
Sprintstar