Как удалить или заменить содержимое SVG?

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

Вот фрагмент из функции JavaScript, где я создаю svg:

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

Как удалить старый элемент svg или, по крайней мере, заменить его содержимое?

Ответы

Ответ 1

Вот решение:

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

Это функция remove, предоставляемая D3.js.

Ответ 2

Если вы хотите избавиться от всех детей,

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

удалит весь контент, связанный с svg.

Ответ 3

Установка атрибута id при добавлении элемента svg также позволяет d3 выбрать так remove() позже этого элемента по id:

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

...

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

Ответ 4

У меня было две диаграммы.

<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.

Ответ 5

Вы также можете просто использовать jQuery для удаления содержимого div, содержащего ваш svg.

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

Ответ 6

Я использую SVG, используя D3.js, и у меня была та же проблема.

Я использовал этот код для удаления предыдущего svg, но линейный градиент внутри SVG не приходил в IE

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

тогда я написал приведенный ниже код для решения проблемы

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

здесь я удаляю предыдущий g и путь внутри SVG, заменяя новый.

Сохраняя мой линейный градиент внутри тегов SVG в статическом контенте, а затем я вызываю вышеуказанный код, он работает в IE

Ответ 7

Вы должны использовать append("svg:svg"), а не append("svg"), чтобы D3 создавал элемент с правильным "пространством имен", если вы используете xhtml.