Wie kann ich SVG-Inhalte entfernen oder ersetzen?

200

Ich habe einen Teil des JavaScript-Codes, der (mit D3.js) ein svgElement erstellt, das ein Diagramm enthält. Ich möchte das Diagramm basierend auf neuen Daten aktualisieren, die von einem Webdienst mit AJAX stammen. Das Problem ist, dass jedes Mal, wenn ich auf die Schaltfläche "Aktualisieren" klicke, ein neues generiert svgwird. Daher möchte ich das alte entfernen oder dessen Inhalt aktualisieren.

Hier ist ein Ausschnitt aus der JavaScript-Funktion, in der ich Folgendes erstelle svg:

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

Wie kann ich das alte svgElement entfernen oder zumindest seinen Inhalt ersetzen?

javascript ajax svg d3.js Sami
quelle

6

github.com/mbostock/d3/wiki/Selections#wiki-remove

Felix Kling

1

@ Felix Kling Danke :) die Funktion zum Entfernen von D3.js hat es gelöst var svg1 = d3.select ("svg") .remove ();

Sami

1

Sie können verwendend3.select("svg").empty();

csandreas1

282

Hier ist die Lösung:

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

Dies ist eine removeFunktion von D3.js.

Sami
quelle

110

Wenn Sie Elemente aus svg entfernen möchten, ist es besser, Folgendes zu verwenden : svg.selectAll("*").remove();. Dadurch wird der Inhalt des Elements gelöscht, auch wenn die svgVariable auf ein Gruppierungselement ( g) gesetzt ist.

Nux

4

@Nux wegen dir gehe ich heute pünktlich. d3.html ('') funktioniert in Safari nicht.

Glyphe

Vielen Dank, aber wenn ich ein Diagramm entferne und dann sofort versuche, ein neues Diagramm hinzuzufügen, wird es nicht hinzugefügt? Jeder Vorschlag, danke.

Codingbbq

Der obige Code entfernt das gesamte svg-Element, das das Diagramm enthält. Sie müssten ein neues SVG-Element erstellen, um ein neues Diagramm hinzuzufügen, denke ich.

Sami

Seltsam, dass der Safari-Fehler immer noch besteht. Sie sollten das flicken.

Tyguy7

149

Wenn Sie alle Kinder loswerden wollen,

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

entfernt alle mit dem svg verknüpften Inhalte.

Hinweis : Dies wird empfohlen, wenn Sie das Diagramm aktualisieren möchten.

burce
quelle

9

Ich empfehle dies, wenn Sie ein Diagramm aktualisieren möchten. Entfernen Sie ihre Kinder und fügen Sie die neuen hinzu.

Matheus Araujo

Ich habe diese Antwort verwendet, um mein Problem zu lösen. Diese Antwort löscht alle erstellten Inhalte im SVG-Tag und ich kann meine Diagramme nach dem Löschen der Inhalte aktualisieren

Hamed R

Werden dadurch alle zugeordneten Ereignis-Listener entfernt, die Kindern in SVG zugewiesen sind?

Anuroop Pendela

58

Wenn Sie das ID-Attribut beim Anhängen des SVG-Elements festlegen, kann d3 auch auswählen, also entfernen Sie () später für dieses Element anhand der ID:

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

...

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

quelle

3

Dies ist eine viel sicherere / sauberere Lösung als die als Antwort ausgewählte. Durch Auswahl von svg mit id kann vermieden werden, dass andere svg-Elemente, die möglicherweise auf derselben Seite vorhanden sind, durcheinander gebracht werden. Bitte stimmen Sie dem zu.

Quest Monger

Ich habe dies in der Vergangenheit verwendet und dies ist eine präzise Lösung. Durch Hinzufügen einer ID werden auch die Knoten dokumentiert.

Christophe Roussy

31

Ich hatte zwei Diagramme.

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

Dadurch wurden alle Diagramme entfernt.

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

Dies funktionierte zum Entfernen des vorhandenen Balkendiagramms, aber danach konnte ich das Balkendiagramm nicht mehr hinzufügen

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

Versuchte dies. Damit kann ich nicht nur das vorhandene Balkendiagramm entfernen, sondern auch ein neues Balkendiagramm hinzufügen.

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

Ich bin mir nicht sicher, ob dies der richtige Weg ist, um ein Diagramm in d3 zu entfernen und erneut hinzuzufügen. Es hat in Chrome funktioniert, aber nicht im IE getestet.

Stirling
quelle

6

Ich benutze die SVG mit D3.js und ich hatte das gleiche Problem.

Ich habe diesen Code zum Entfernen des vorherigen SVG verwendet, aber der lineare Gradient in SVG kam nicht in IE

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

Dann habe ich den folgenden Code geschrieben, um das Problem zu beheben

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

hier entferne ich das vorherige g und den Pfad innerhalb der SVG und ersetze sie durch das neue.

Behalten Sie meinen linearen Verlauf in SVG-Tags im statischen Inhalt bei und rufen Sie dann den obigen Code auf. Dies funktioniert im IE

Shailender Singh
quelle

6

Sie können auch einfach jQuery verwenden, um den Inhalt des Divs zu entfernen, das Ihre SVG enthält.

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

cjungel
quelle

12

Keine gute Idee, jQuery für die DOM-Manipulation zu verwenden, wenn Sie bereits ein großartiges Tool für diesen Job in D3 verwenden. Vor allem, wenn Sie jQuery nicht anderweitig verwenden.

Warren Reilly

4

Sie sollten verwenden append("svg:svg"), nicht append("svg")damit D3 das Element mit dem richtigen 'Namespace' erstellt, wenn Sie xhtml verwenden.

Sprintstar
quelle

Wie kann ich SVG-Inhalte entfernen oder ersetzen?

Antworten: