Question

我正在使用d3.js并尝试在鼠标悬停时突出显示一个元素。我有一个问题，我的矩形在鼠标悬停时改变颜色，但在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";

}

UtilityCode

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

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

Answer 1

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

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

Answer 2

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

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

我创建了一个小提示，展示如何执行此操作here.

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

2 个答案: