Как я могу удалить или заменить контент SVG?

200

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

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

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

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

— Сами
источник

6

github.com/mbostock/d3/wiki/Selections#wiki-remove

— Феликс Клинг

1

@ Felix Kling Спасибо :) функция удаления из D3.js решила это var svg1 = d3.select ("svg") .remove ();

— Сами

1

Вы можете использоватьd3.select("svg").empty();

— csandreas1

283

Вот решение:

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

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

— Сами
источник

110

на самом деле , если вы хотите , чтобы удалить элементы из SVG , было бы лучше использовать: svg.selectAll("*").remove();. Это очищает содержимое элемента, даже если svgпеременная установлена в элемент группировки ( g).

— Nux

4

@ Нукс из-за тебя я уезжаю сегодня вовремя. d3.html ('') не работает в Safari.

— глиф

Спасибо, однако, если я удаляю график, а затем сразу пытаюсь добавить новый график, он не добавляется? Любое предложение, спасибо.

— codingbbq

Приведенный выше код удаляет весь элемент svg, который содержит диаграмму. Я думаю, вам нужно создать новый элемент SVG, чтобы добавить новую диаграмму.

— Сами

Странно, что ошибка Safari все еще существует. Они должны исправить это.

— Tyguy7

149

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

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

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

Примечание . Рекомендуется, если вы хотите обновить график.

— burce
источник

9

Я рекомендую это, если вы хотите обновить график. Удалите их детей, затем добавьте новых.

— Матеус Араужо

Я использовал этот ответ для решения своей проблемы, этот ответ очистил все созданное содержимое внутри тега svg, и я могу обновлять свои диаграммы после очистки содержимого

— Хамед Р

Удалит ли это какие-либо связанные прослушиватели событий, назначенные детям в SVG?

— Anuroop Pendela

58

Установка атрибута 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();

3

это гораздо безопаснее / чище, чем решение, выбранное в качестве ответа. выбрав svg с помощью id, можно избежать путаницы с другими элементами svg, которые могут существовать на той же странице. пожалуйста, проголосуйте за это.

— Квест Монгер

Я использовал это в прошлом, и это точное решение. Добавление идентификатора также документирует узлы.

— Кристоф Русси

31

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

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

— Stirling
источник

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

— Шайлендер Сингх
источник

6

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

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

— cjungel
источник

12

Не очень хорошая идея использовать jQuery для манипулирования DOM, когда вы уже используете отличный инструмент для этой работы в D3. Особенно, если вы не используете JQuery.

— Уоррен Рейли

4

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

— Sprintstar
источник