d3.js单击时交替颜色，单击另一个点时变回原始颜色

d3.js Alternate colors on click and change back to original on click of another dot

本文关键字：单击 颜色 原始 另一个 d3 js      更新时间：2023-09-26

我正在使用 d3 中的散点图，图表上的每个点代表一张纸。

图表上的所有点都是蓝色的，但在单击时，我希望所选纸张更改颜色，例如（黄色）。但是当单击另一个点时，我希望第一个点恢复为蓝色，新选择的点变为黄色。我将如何实现这一目标？我有一个名为clickHandler的函数，当在单击属性中创建圆圈时调用该函数。

这是一个类似的问题 d3 javascript 点击时的替代颜色

但是，与其在第二次单击该圆圈时圆圈变回原始颜色，不如让它在

单击另一个圆圈时变回原始颜色。

以下代码来自上面链接的问题，我想知道我是否会走在正确的轨道上，认为这是我应该遵循的方法？

function clickHandler (d, i) {
var toggleColor = (function() {
        var currentColor = "blue";
            return function() {
                currentColor = currentColor == "blue" ? "yellow" : "blue";
                d3.select(this).style("fill", currentColor)
                                .style("stroke", "black");
            }
    })
}

任何帮助将不胜感激！提前感谢！

这可以像这样简单：

function clickHandler (d, i) {
  // reset all circle to blue
  d3.selectAll('circle') //<-- or slap a class name on your circles and use that
    .style('fill', 'blue');
  // set selected one to yellow
  d3.select(this)
    .style('fill', 'yellow');
}
相关文章：