Comment supprimer ou remplacer du contenu SVG?

200

J'ai un morceau de code JavaScript qui crée (en utilisant D3.js) un svgélément qui contient un graphique. Je veux mettre à jour le graphique en fonction des 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, il génère une nouvelle svg, donc je veux supprimer l'ancienne ou mettre à jour son contenu.

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

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

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

javascript ajax svg d3.js Sami
la source
6
github.com/mbostock/d3/wiki/Selections#wiki-remove
Felix Kling
1
@ Felix Kling Merci :) la fonction de suppression de D3.js l'a résolu var svg1 = d3.select ("svg") .remove ();
Sami
1
vous pouvez utiliserd3.select("svg").empty();
csandreas1

Réponses:

283

Voici la solution:

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

Il s'agit d'une removefonction fournie par D3.js.

Sami
la source
110
En fait , si vous voulez supprimer des éléments de svg il serait préférable d'utiliser: svg.selectAll("*").remove();. Cela efface le contenu de l'élément même s'il est défini svgsur un élément de regroupement ( g).
Nux
4
@Nux à cause de toi, je pars à l'heure aujourd'hui. d3.html ('') ne fonctionne pas dans Safari.
glyphe
Merci, cependant, si je supprime un graphique et que j'essaie immédiatement d'ajouter un nouveau graphique, il ne sera pas ajouté? Toute suggestion, merci.
codingbbq
Le code ci-dessus supprime l'élément svg entier qui contient le graphique. vous auriez besoin de créer un nouvel élément svg pour ajouter un nouveau graphique je suppose.
Sami
Étrange que le bogue Safari existe toujours. Ils devraient corriger cela.
Tyguy7
149

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

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

supprimera tout le contenu associé au svg.

Remarque : Ceci est recommandé dans le cas où vous souhaitez mettre à jour le graphique.

burce
la source
9
Je le recommande si vous souhaitez mettre à jour un graphique. Retirez leurs enfants puis ajoutez les nouveaux.
Matheus Araujo
J'ai utilisé cette réponse pour résoudre mon problème, cette réponse efface tout le contenu créé à l'intérieur de la balise svg, et je peux mettre à jour mes graphiques après avoir effacé le contenu
Hamed R
Cela supprimera-t-il les écouteurs d'événements associés, qui sont affectés aux enfants dans SVG?
Anuroop Pendela
58

La définition de l'attribut id lors de l'ajout de l'élément svg peut également laisser d3 sélectionner donc 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();

la source
3
il s'agit d'une solution beaucoup plus sûre / propre que celle sélectionnée comme réponse. en sélectionnant svg en utilisant id, on peut éviter de gâcher d'autres éléments svg qui pourraient exister sur la même page. merci de voter.
Quest Monger
Je l'ai utilisé dans le passé et c'est une solution précise. L'ajout d'un identifiant documente également les nœuds.
Christophe Roussy
31

J'avais deux graphiques.

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

Cela a supprimé tous les graphiques. 

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

Cela a fonctionné pour supprimer le graphique à barres existant, mais je n'ai pas pu rajouter le graphique à barres après

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

J'ai essayé ça. Cela m'a non seulement permis 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 + ')');

Je ne sais pas si c'est la bonne façon de supprimer et de rajouter un graphique dans d3. Il a fonctionné dans Chrome, mais n'a pas été testé dans IE.

Stirling
la source
6

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 gradient linéaire à l'intérieur de SVG ne venait pas dans IE

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

puis 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, le 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

Shailender Singh
la source
6

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

$("#container_div_id").html("");
cjungel
la source
12
Ce n'est pas une bonne idée d'utiliser jQuery pour la manipulation DOM lorsque vous utilisez déjà un excellent outil pour ce travail dans D3. Surtout si vous n'avez pas autrement utilisé jQuery.
Warren Reilly
4

Vous devriez utiliser append("svg:svg"), pas append("svg")pour que D3 crée l'élément avec le 'namespace' correct si vous utilisez xhtml.

Sprintstar
la source