2

我正在使用 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');
}
4

2 回答 2

3

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

var myMouseOut = function() {
    var rect = d3.select(this);
    rect.style("fill", function(d) {
    return d.color;
});
}
于 2013-07-01T14:47:19.503 回答
1

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

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

我创建了一个小提琴，展示了如何在此处执行此操作。

于 2013-07-01T14:47:54.083 回答