d3 javascript click函數調用

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

首先，在連接click事件時，仍未定義var toggleColor （因為它是在頁面下方定義的）。 因此，您需要將其向上移動。

然后，警報在運行時僅出現一次的原因是因為那是該代碼運行的時間。 如果您注意到，外部函數在聲明之后立即執行，如代碼最后一行的() 。 那是當alert()被調用時。 您需要將其移動到內部函數的主體（返回的主體）中，因為該內部函數是在單擊時實際運行的代碼。