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在您点击点击事件的时候仍未定义（因为它在页面的下方定义）。所以你需要把它搬起来。

然后，警报在运行时只出现一次的原因是因为那是运行该代码的时间。如果你注意到，外部函数在声明后立即执行，正如代码最后一行的()所显示的那样。那是alert()被调用的时候。你会想把它移动到内部函数的主体 - 返回的那个 - 因为内部函数是实际上在点击时运行的代码。