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

200

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

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

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

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

javascript ajax svg d3.js Сами
источник

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
источник

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

Ответы: