Jak mogę usunąć lub zamienić zawartość SVG?

200

Mam kawałek kodu JavaScript, który tworzy (przy użyciu D3.js) svgelement zawierający wykres. Chcę zaktualizować wykres w oparciu o nowe dane pochodzące z usługi internetowej za pomocą AJAX, problem polega na tym, że za każdym razem, gdy klikam przycisk aktualizacji, generuje nowy svg, więc chcę usunąć stary lub zaktualizować jego zawartość.

Oto fragment funkcji JavaScript, w której tworzę svg:

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

Jak mogę usunąć stary svgelement lub przynajmniej zastąpić jego zawartość?

Sami
źródło
1
@ Felix Kling Dzięki :) funkcja usuwania z D3.js rozwiązała to var svg1 = d3.select ("svg") .remove ();
Sami
1
możesz użyćd3.select("svg").empty();
csandreas1

Odpowiedzi:

282

Oto rozwiązanie:

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

Jest to removefunkcja zapewniana przez D3.js.

Sami
źródło
110
rzeczywiście, jeśli chcesz usunąć elementy z svg lepiej byłoby użyć: svg.selectAll("*").remove();. Czyści zawartość tego elementu, nawet jeśli svgzmienna jest ustawiona na element grupujący ( g).
Nux
4
@Nux przez ciebie dziś odchodzę na czas. d3.html ('') nie działa w Safari.
glif
Dzięki, jeśli jednak usunę wykres, a następnie od razu spróbuję dodać nowy wykres, nie zostanie on dodany? Wszelkie sugestie, dziękuję.
codingbbq
Powyższy kod usuwa cały element svg, który zawiera wykres. musiałbyś utworzyć nowy element svg, aby dodać nowy wykres.
Sami,
Dziwne, że błąd Safari nadal istnieje. Powinni to załatać.
Tyguy7
149

Jeśli chcesz pozbyć się wszystkich dzieci,

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

usunie całą zawartość związaną z svg.

Uwaga : jest to zalecane w przypadku, gdy chcesz zaktualizować wykres.

zakopać
źródło
9
Polecam to, jeśli chcesz zaktualizować wykres. Usuń ich dzieci, a następnie dołącz nowe.
Matheus Araujo
Użyłem tej odpowiedzi, aby rozwiązać mój problem, ta odpowiedź wyczyściła całą utworzoną zawartość wewnątrz tagu svg i mogę zaktualizować moje wykresy po wyczyszczeniu zawartości
Hamed R
Czy spowoduje to usunięcie wszystkich powiązanych detektorów zdarzeń przypisanych do dzieci w SVG?
Anuroop Pendela
58

Ustawienie atrybutu id podczas dodawania elementu svg może również pozwolić d3 wybrać, więc usuń () później w tym elemencie przez id:

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

...

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

źródło
3
jest to znacznie bezpieczniejsze / czystsze rozwiązanie niż wybrane jako odpowiedź. wybierając svg za pomocą id, można uniknąć zepsucia innych elementów svg, które mogą istnieć na tej samej stronie. proszę to zagłosować.
Quest Monger
Użyłem tego w przeszłości i jest to precyzyjne rozwiązanie. Dodanie identyfikatora dokumentuje również węzły.
Christophe Roussy
31

Miałem dwie mapy.

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

To usunęło wszystkie wykresy.

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

To działało na usunięcie istniejącego wykresu słupkowego, ale potem nie mogłem ponownie dodać wykresu słupkowego później

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

Próbowałem tego. Nie tylko pozwala mi to usunąć istniejący wykres słupkowy, ale także pozwala mi ponownie dodać nowy wykres słupkowy.

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

Nie jestem pewien, czy jest to właściwy sposób na usunięcie i ponowne dodanie wykresu w d3. Działał w Chrome, ale nie testował w IE.

Stirling
źródło
6

Korzystam z SVG przy użyciu D3.js i miałem ten sam problem.

Użyłem tego kodu do usunięcia poprzedniego svg, ale liniowy gradient wewnątrz SVG nie pojawiał się w IE

$ („# container_div_id”). html („”);

następnie napisałem poniższy kod, aby rozwiązać problem

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

tutaj usuwam poprzednią ścieżkę g i ścieżkę wewnątrz SVG, zastępując ją nową.

Utrzymywanie mojego liniowego gradientu wewnątrz tagów SVG w treści statycznej, a następnie wywołałem powyższy kod, to działa w IE

Shailender Singh
źródło
6

Możesz także użyć jQuery, aby usunąć zawartość div, która zawiera twój plik svg.

$("#container_div_id").html("");
cjungel
źródło
12
Nie jest to świetny pomysł na użycie jQuery do manipulacji DOM, gdy już używasz świetnego narzędzia do tego zadania w D3. Zwłaszcza jeśli nie masz jQuery w użyciu.
Warren Reilly,
4

Powinieneś używać append("svg:svg"), nie po append("svg")to, aby D3 tworzył element z poprawną „przestrzenią nazw”, jeśli używasz xhtml.

Sprintstar
źródło