Як я можу видалити або замінити вміст SVG?

У мене є фрагмент коду JavaScript, який створює (використовуючи D3.js) svgелемент, який містить діаграму. Я хочу оновити графік на основі нових даних, що надходять від веб-сервісу за допомогою AJAX, проблема полягає в тому, що кожного разу, коли я натискаю кнопку оновлення, вона генерує нову svg, тому я хочу видалити стару або оновити її вміст.

Ось фрагмент функції JavaScript, де я створюю svg:

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

Як я можу видалити старий svgелемент або принаймні замінити його вміст?

Ось таке рішення:

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

Це removeфункція, яку надає D3.js.

Якщо ви хочете позбутися всіх дітей,

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

видалить увесь вміст, пов’язаний із svg.

Примітка . Це рекомендується, якщо ви хочете оновити діаграму.

Встановлення атрибута id при додаванні елемента SVG може також дозволити d3 вибирати так видалити () пізніше цього елемента за допомогою id:

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

...

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

У мене було дві діаграми.

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

Це видалило всі діаграми.

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

Це працювало для видалення існуючої гістограми, але потім я не зміг повторно додати діаграму після

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

Спробував це. Це не лише дозволить мені видалити існуючу діаграму, але й дозволить повторно додати нову діаграму.

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

Не впевнений, що це правильний спосіб видалення та повторне додавання діаграми в d3. Він працював у Chrome, але не пройшов тестування в IE.

Я використовую SVG за допомогою D3.js, і у мене була та сама проблема.

Я використовував цей код для видалення попереднього svg, але лінійний градієнт всередині SVG не надходив у IE

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

тоді я написав код нижче, щоб вирішити проблему

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

тут я видаляю попередній g і шлях всередині SVG, замінюючи новим.

Зберігаючи мій лінійний градієнт всередині тегів SVG в статичному вмісті, а потім я назвав вищевказаний код, Це працює в IE

Ви також можете просто використовувати jQuery, щоб видалити вміст div, який містить ваш svg.

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

Ви повинні використовувати append("svg:svg"), не append("svg")так, щоб D3 створював елемент з правильним "простором імен", якщо ви використовуєте xhtml.