D3JavaScript单击函数调用

我试图让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"); } })(); var circle=graph.selectAll（“circle.value”） .数据（数据） .enter（）.append（“圆”） .attr（“类”、“值”） .attr（“cx”，函数（d）{返回x（d.hour）；}） .attr（“cy”，函数（d）{返回y（d.value）；}） .attr（“r”，5） //.on（“click”，function（）{d3.select（this）.attr（“class”，“flagged”）；}）； 。打开（“单击”，切换颜色）； var toggleColor=（函数（）{ //发出警报以便采取有效措施。 警报（“单击了？”） var currentColor=“白色”； 返回函数（）{ currentColor=currentColor==“白色”？“洋红色”：“白色”； d3.选择（此）.atrr（“类”，“标记”）； } })();

---

首先，

var-toggleColor

在连接click事件时仍然没有定义（因为它是在页面的下一步定义的）。所以你需要把它向上移动

---

然后，该警报在运行时只出现一次的原因是，该代码在运行时出现。如果您注意到，外部函数在声明之后立即执行，代码最后一行的

（）

就是明证。此时将调用

alert（）

。您需要将其移动到内部函数体中——返回的函数体中——因为该内部函数是在单击时实际运行的代码。

首先，

var-toggleColor

在连接单击事件时仍然未定义（因为它在页面的下一层定义）。所以你需要把它向上移动

然后，该警报在运行时只出现一次的原因是，该代码在运行时出现。如果您注意到，外部函数在声明之后立即执行，代码最后一行的

（）

就是明证。此时将调用

alert（）

。您需要将其移动到内部函数的主体中——返回的主体中——因为该内部函数是在单击时实际运行的代码