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

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ść?

Oto rozwiązanie:

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

Jest to removefunkcja zapewniana przez D3.js.

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.

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();

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.

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

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

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

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