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()被调用时。 您需要将其移动到内部函数的主体（返回的主体）中，因为该内部函数是在单击时实际运行的代码。