I'm using d3.js and try to highlight an element on mouseover. I have the problem that my rectangles change color on mouseover, but does not change back on mouseout. The elements have many different colors, so I can't hardcode what color the rectangle should get on mouseout.

Here is my code

Code where I make the rect

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

Color function called in above code

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

I'm using d3.js and try to highlight an element on mouseover. I have the problem that my rectangles change color on mouseover, but does not change back on mouseout. The elements have many different colors, so I can't hardcode what color the rectangle should get on mouseout.

Here is my code

Code where I make the rect

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

Color function called in above code

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

• javascript
• d3.js

Share Improve this question Follow asked Jul 1, 2013 at 14:25 Aleks GAleks G 75022 gold badges88 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You could set the fill to equal a function. If you for example have the color value in your data object, it would be something like this:

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

You should be able to call your color function again within your myMouseOut function. If you pass a function as your second argument in rect.style(), d3 will pass it d as an argument, so you can use:

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

I've created a fiddle showing how to do this here.