d3 javascript点击函数调用

Question

我正在尝试让 d3 在单击它们时更改绘图点的颜色，但目前似乎无法使其正常工作。下面的注释行确实将颜色从白色更改为洋红色，但 toggleColor 函数似乎没有做任何事情。实际上，警报仅在第一次运行时发生，而不是在单击某个点时发生。我在这里做错了什么？

var circle = graph.selectAll("circle.value") .data（数据） .enter().append("圆") .attr("类", "值") .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("点击", toggleColor); var toggleColor = (function(){ // 发出警报以获得良好的度量。 . . alert("点击了？") var currentColor = "白色"; 返回函数（）{ currentColor = currentColor == "白色" ? “洋红色”：“白色”； d3.select(this).atrr("class", "flaged"); } })();

Answer 1

首先，var toggleColor 在您连接点击事件的位置仍然未定义（因为它在页面下方进一步定义）。所以你需要把它上移。

然后，警报在运行时只出现一次的原因是因为那是该代码运行的时候。如果您注意到，外部函数在声明后立即执行，如代码最后一行的() 所示。那是alert() 被调用的时候。您需要将其移动到内部函数的主体中——返回的那个——因为该内部函数是在点击时实际运行的代码。