如何刪除或替換SVG內容？

156

我有一段JavaScript代碼，它創建（使用D3.js）包含圖表的svg元素。我想根據來自使用AJAX的Web服務的新數據更新圖表，問題是每次點擊更新按鈕時，它會生成一個新的svg，所以我想刪除舊的或更新其內容。如何刪除或替換SVG內容？

下面是來自JavaScript函數的代碼段，我創建svg：

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

我怎樣可以刪除舊svg元素或至少替換它的內容？

來源

2012-05-28 Sami

https://github.com/mbostock/d3/wiki/Selections#wiki-remove –

@費利克斯·克林謝謝:)從D3.js remove函數解決它 VAR svg1 = d3.select（「SVG」） .remove（）; 'svg.selectAll（「*」），刪除（）;如果你想刪除元素__from__ SVG倒不如使用' – Sami

您可以用'd3.select（「SVG」）空（）。 '。即使將'svg'變量設置爲分組元素（'g'），該元素的清除內容也是如此。 – csandreas1

223

下面是解：

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

這是由D3.js.提供一個remove功能

來源

2012-06-06 09:30:10 Sami

+79

實際上， – Nux

@Nux因爲你我今天準時出發了。 d3.html（''）在Safari中不起作用。 – glyph

謝謝，但是如果我刪除圖表，然後立即嘗試添加新圖表，它不會被添加？任何建議，謝謝。 – noobcode

您應該使用append("svg:svg")而不是append("svg")，以便D3使用正確的'名稱空間'來創建元素（如果使用的是xhtml）。

來源

2012-07-23 08:11:36 Sprintstar

你也可以使用jQuery去除包含你的svg的div的內容。

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

來源

2013-12-30 18:52:12 cjungel

當您在D3中已經在使用這個工作的優秀工具時，使用jQuery進行DOM操作不是一個好主意。特別是如果你沒有使用jQuery。 –

我使用的SVG使用D3.js和我有同樣的問題。

我使用此代碼爲刪除以前的SVG但內部SVG的線性梯度在IE中沒有來

$（「＃container_div_id」）的HTML（「」）。

然後我寫了下面的代碼來解決問題

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

我在這裏取下SVG裏面以前的G和路徑，用新的替換。

保持SVG標籤在我的線性漸變的靜態內容，然後我打電話給上面的代碼，這在IE

來源

2014-03-27 08:29:09

追加SVG元素時，也可以讓D3選擇這樣去除設置id屬性（）後在這個元素的ID：

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

... 

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

來源

2014-03-31 12:40:30

這是比選擇答案更安全/更清潔的解決方案。通過使用id選擇svg，可以避免混淆可能存在於同一頁面上的其他svg元素。請注意這一點。 –

我以前用過這個，這是一個精確的解決方案。添加一個id也記錄節點。 –

我有兩個圖表。

<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中進行測試。

來源

2014-05-05 22:44:17 Stirling

102

如果你想擺脫所有兒童，

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

將刪除與SVG相關聯的所有內容。

來源

2014-06-16 18:43:15 bryce

如果你想更新圖表，我建議你這樣做。刪除他們的孩子然後添加新的。 –

如何刪除或替換SVG內容？

回答

相關問題