d3 javascript點擊函數調用

Question

我試圖讓d3在點擊它們時改變繪圖點的顏色，但目前似乎無法得到這個工作。下面的註釋行確實將顏色從白色更改爲洋紅色，但toggleColor函數似乎沒有任何作用。實際上，警報僅在第一次運行時發生，而不是在單擊某個點時發生。我在這裏做錯了什麼？

 
var circle = graph.selectAll("circle.value") 
    .data(data) 
    .enter().append("circle") 
    .attr("class", "value") 
    .attr("cx", function(d) { return x(d.hour); }) 
    .attr("cy", function(d) { return y(d.value); }) 
    .attr("r", 5) 
    //.on("click", function(){d3.select(this).attr("class", "flagged");}); 
    .on("click", toggleColor); 


var toggleColor = (function(){ 
    // throw in an alert for good measure. . . 
    alert("Clicked?") 
    var currentColor = "white"; 
    return function(){ 

     currentColor = currentColor == "white" ? "magenta" : "white"; 
     d3.select(this).atrr("class", "flagged"); 
    } 
    })(); 

Answer 1

首先，var toggleColor在那裏你連線了click事件（因爲它進一步明確了網頁）點仍然是不確定的。所以你需要移動它。

然後，在運行時警報只出現一次的原因是因爲那是代碼運行的時候。如果您注意到，外部函數在聲明後立即執行，如代碼最後一行()所示。那是alert()被調用。你需要將它移入內部函數的主體 - 返回的函數 - 因爲內部函數是實際上在點擊時運行的代碼。