d3 javascript点击函数调用

Posted 2023-05-09

【中文标题】d3 javascript点击函数调用

【英文标题】：d3 javascript click function call

【发布时间】：2012-06-14 20:04:54

【问题描述】：

我正在尝试让 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"); )();

【参考方案1】：

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

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