清除D3.js畫布

Question

我正在使用D3生成家譜圖（基於此處提供的代碼： http : //www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html ），該圖數據來自服務器和用戶可以選擇他要查看的家庭，然后單擊“提交”按鈕以返回數據，然后D3繪制圖形。 但是，如果用戶選擇另一個家庭（或與此相同的家庭）並按提交而不刷新頁面，則新圖形將繪制在舊家庭下方。 如何清除D3.js畫布，以便僅看到新圖形？

Answer 1

將.remove()應用於現有選擇。

// Set new data on your chart:
var items = d3.select('svg').selectAll('.item').data(newData);

// Remove old elements:
items.exit().remove();

Answer 2

在繪制圖形之前，請使用以下代碼。 希望這會有所幫助。

d3.select('svg').selectAll('*').remove();

Answer 3

在使用容器的情況下，使用JQuery空方法清除容器解決了我的問題

$("#svgCanvasDiv").empty();

Answer 4

上面的方法在某些情況下有效，但是我發現清除畫布的最簡單方法是將其繪制在容器中，然后再繪制任何東西，使用以下方法清除容器：d3.select（“＃container”）。html（null ）;

Answer 5

您可以使用清除畫布

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

新圖形將在此清除空間中繪制。