在D3中重繪/刷新圖形

我目前有一個下拉和日期選擇器，單擊時返回一個新的數據源。類似的方法見here。在D3中重繪/刷新圖形

此數據源用於創建我的圖形並向上/向下縮放顯示的數據量。

一般情況下，我的源代碼如下這樣的結構：

var updateGraphData = function(error, json) { 
    updateGraph(json); 
} 

    // datepicker code goes here 
    // url param update code as seen in linked jsfiddle goes here 

function MakeUrl() { 
    var urlSource = BaseURL + param1 + param2; /*these values are defined in the param code mentioned */ 
    d3.json(urlSource, updateGraphData); 
} 

    //set dimensions 
var margin = {top: 30,right: 60,bottom: 30,left: 60 
}; 
var width = 800 - margin.left - margin.right; 
var height = 400 - margin.top - margin.bottom; 
var color = d3.scale.category10(); 

function updateGraph(json_data) { 
    /* everything I want drawn goes here, i.e. axes, lines, points, labels, etc.*/ 
};

現在，我的附加網址源代碼的工作 - 用正確的數據集的圖並重新渲染。但只有當我在updateGraph函數中定義了我的SVG元素時。當我這樣做時，一個新的圖形會呈現出合適的圖形，但它會在舊圖形下方彈出一個新圖形。這不是我想要的。我希望我的新圖取代舊圖。

當我嘗試拉動我的SVG元素之前updateGraph函數（所以定義的邊距和尺寸定義的地方），該圖並沒有重複下拉的變化，但它分層的數據以我無法查看任何有用的數據。

基本上，我無法刪除新數據請求上的所有圖形元素。你會怎麼建議去做這件事？我覺得它應該像在我的updateGraphData（）函數中使用svg.selectAll（「*」）。remove（）一樣簡單，但它只是停止在SVG內呈現任何數據。

對我有何建議？

非常感謝！如果我不清楚，請告訴我。

來源

2017-03-09 KateJean

好的團隊，

小時後並尋找答案的時間，我終於找到了一個。希望這會幫助別人。

所以就像我說的，我得到了新的圖形追加到舊圖形下面。我有問題得到以前的數據清除，我似乎無法弄清楚如何指定一個特定的圖形清除，而無需清除我的所有數據（新舊）。

溶液簡單地增加線：

d3.selectAll("g > *").remove()

以我updateGraph（）函數。

這會刪除以前創建的所有「g」元素。這樣，svg容器仍然存在，你可以填充新的數據。

來源

2017-03-10 14:45:29 KateJean

在D3中重繪/刷新圖形

回答

相關問題