Mam kawałek kodu JavaScript, który tworzy (przy użyciu D3.js) svg
element 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 svg
element lub przynajmniej zastąpić jego zawartość?
javascript
ajax
svg
d3.js
Sami
źródło
źródło
d3.select("svg").empty();
Odpowiedzi:
Oto rozwiązanie:
Jest to
remove
funkcja zapewniana przez D3.js.źródło
svg.selectAll("*").remove();
. Czyści zawartość tego elementu, nawet jeślisvg
zmienna jest ustawiona na element grupujący (g
).Jeśli chcesz pozbyć się wszystkich dzieci,
usunie całą zawartość związaną z svg.
Uwaga : jest to zalecane w przypadku, gdy chcesz zaktualizować wykres.
źródło
Ustawienie atrybutu id podczas dodawania elementu svg może również pozwolić d3 wybrać, więc usuń () później w tym elemencie przez id:
źródło
Miałem dwie mapy.
To usunęło wszystkie wykresy.
To działało na usunięcie istniejącego wykresu słupkowego, ale potem nie mogłem ponownie dodać wykresu słupkowego później
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.
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.
źródło
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
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
źródło
Możesz także użyć jQuery, aby usunąć zawartość div, która zawiera twój plik svg.
źródło
Powinieneś używać
append("svg:svg")
, nie poappend("svg")
to, aby D3 tworzył element z poprawną „przestrzenią nazw”, jeśli używasz xhtml.źródło