D3.js在mouseout上恢复以前的颜色

D3.js restore previous color on mouseout

本文关键字：颜色 恢复 js mouseout D3      更新时间：2023-09-26

我正在使用d3.js，并尝试在mouseover上突出显示一个元素。我有一个问题，我的矩形在mouseover时会改变颜色，但在mouseout时不会变回。这些元素有很多不同的颜色，所以我无法硬编码mouseout上的矩形应该是什么颜色。

这是我的代码

我制作直接的代码

    nodeEnter.append("svg:rect")
    .attr("y", -barHeight / 2)
    .attr("height", barHeight)
    .attr("width", barWidth)
    .style("fill", color)
    .on("click", click)
    .on("mouseover", seres.utilities.highlight)
    .on("mouseout", seres.utilities.downlight);

上述代码中调用的颜色函数

function color(d) {
  return d._children ? "#3c3c3c" : d.children ? "#c2bcbc" : "#ffffff";

}

公用事业代码

var myMouseOver = function() {
    var rect = d3.select(this);
    rect.style("fill", "red");
}
var myMouseOut = function() {
    var rect = d3.select(this);
    rect.style("fill", 'DONTKNOWWHATTOPUTHERE');
}

您可以将填充设置为等于一个函数。例如，如果你的数据对象中有颜色值，它会是这样的：

var myMouseOut = function() {
    var rect = d3.select(this);
    rect.style("fill", function(d) {
    return d.color;
});
}

您应该能够在myMouseOut函数中再次调用color函数。如果您在rect.style()中传递一个函数作为第二个参数，d3会将其作为参数传递给d，因此您可以使用：

var myMouseOut = function(d){
    d3.select(this)
      .style("fill",color);
};

我制作了一把小提琴，展示如何在这里做到这一点。

相关文章：