it-swarm.com.de

Wie kann ich SVG-Inhalte entfernen oder ersetzen?

Ich habe einen JavaScript-Code, der (unter Verwendung von D3.js) ein svg -Element 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 besteht darin, dass jedes Mal, wenn ich auf die Schaltfläche "Aktualisieren" klicke, ein neues svg generiert wird. Daher möchte ich das alte entfernen oder aktualisieren Sie den Inhalt.

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

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

Wie kann ich das alte svg -Element entfernen oder zumindest dessen Inhalt ersetzen?

186
Sami

Hier ist die Lösung:

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

Dies ist eine remove -Funktion, die von D3.js bereitgestellt wird.

260
Sami

Wenn Sie alle Kinder loswerden wollen,

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

wird alle Inhalte entfernen, die mit dem SVG verbunden sind.

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

134
burce

Das Setzen des id-Attributs beim Anhängen des svg-Elements kann d3 auch so wählen lassen, dass später dieses Element durch id entfernt wird:

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

...

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

Ich hatte zwei Karten.

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

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

28
Stirling

Sie können auch einfach jQuery verwenden, um den Inhalt der div zu entfernen, die Ihre svg enthält.

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

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 vorhergehende g und den Pfad innerhalb des SVG und ersetze durch das neue.

Halten Sie meinen linearen Verlauf in SVG-Tags im statischen Inhalt und dann habe ich den obigen Code aufgerufen. Dies funktioniert im IE

6

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

4
Sprintstar