Comment supprimer ou remplacer un contenu SVG ?

Question

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

Voici un extrait de la fonction JavaScript dans laquelle je crée l'objet svg :

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

Comment puis-je supprimer l'ancien svg ou au moins remplacer son contenu ?

Answer 1

Voici la solution :

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

Il s'agit d'un remove fournie par D3.js.

Answer 2

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

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

supprimera tout le contenu associé au svg.

Answer 3

Le fait de définir l'attribut id lors de l'ajout de l'élément svg peut également permettre à d3 select so remove() plus tard sur cet élément par id :

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

...

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

Answer 4

J'avais deux tableaux.

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

Cela a supprimé tous les graphiques.

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

Cela a fonctionné pour supprimer le diagramme à barres existant, mais je n'ai pas pu le réinsérer après l'ajout de l'indicateur.

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

J'ai essayé ça. Elle m'a permis non seulement de supprimer le graphique à barres existant, mais aussi de réinsérer 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 + ')');

Je ne suis pas sûr que ce soit la bonne façon de supprimer et de réintroduire un graphique dans D3. Cela a fonctionné dans Chrome, mais je n'ai pas testé dans IE.

Answer 5

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

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