D3.js 在鼠标移出时恢复以前的颜色答案

【问题标题】：D3.js restore previous color on mouseoutD3.js 在鼠标移出时恢复以前的颜色
【发布时间】：2013-07-01 14:25:41
【问题描述】：

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

这是我的代码

我制作矩形的代码

    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');
}

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

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

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

【讨论】：

谢谢！我想我自己应该看到那个解决方案

【解决方案2】：

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

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

我创建了一个小提琴来展示如何做到这一点here.

【讨论】：

感谢闪电般快速的回答，然而，Simenhg 是最快的，所以我给了他接受的复选标记。