javascript - 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() 被调用的时候。您需要将它移到内部函数的主体中——返回的函数——因为该内部函数是在点击时实际运行的代码。