使用D3在另一個JavaScript函數內調用時出現問題

Question

我正在學習將D3.js用於我已有的一些可視化創意，並且遇到了可能很容易實現的事情，並且可能僅僅是JavaScript問題。

我想從另一個函數中調用一個函數。 我已經創建了一個基本的散點圖，並希望重新加載新的數據點。 這是JSFiddle 。 我真的很沮喪！

我認為以最簡單的形式看起來像這樣：

function firstFunction() {
    var something;
}

function secondFunction() {
    firstFunction();
}

但是，有時似乎有時無效，並且無法弄清原因。

Answer 1

發生的事情是，在jsfiddle中，默認設置是將所有內容封裝在運行於窗口加載的函數中。 代碼如下： window.onload=function(){your stuff}

當您嘗試設置onload時，代碼結構的結構如下：

function firstFunction(){
    function secondFunction(){
        do stuff
    }
}

onload = secondFunction;

問題在於，在secondFunction范圍之外無法訪問firstFunction 。 這稱為變量作用域，而沒有它，編碼會很爛。

解決此問題的方法是將onload分配移至javascript塊。 我建議這樣做的內置d3方法： d3.select('button').on('click',newScatter); 在這里，我選擇按鈕並添加一個click事件處理程序。 之所以d3.select() ，是因為只有一個按鈕，但是最好給按鈕一個類或id並在d3.select()使用它。

如果這樣做，您的代碼仍將不起作用，但這是因為您刪除了應該在newScatter()包含散點圖的SVG元素（此行： elem.parentNode.removeChild(elem); ）。 但是，該按鈕將成功執行您要求的操作並刪除散點圖。

我在這里創建了您的提琴的工作版本。