In a previous project, I created a stacked bar chart with some interesting mouseover effects. Now, I want to take it a step further by changing the size of the rectangle that the user hovers over, returning it to its original size once they move away.
My aim is to have the rectangle resize on mouseover, so I started by attempting to adjust the height using this code:
.on('mouseover', function(d){
d3.select(this).style("height", "110%");
})
I expected the rectangle to expand to 110% of its original height. However, instead of doing that, it ended up being 110% of the overall div's height. So, I tried a different approach using D3 selectors:
.on('mouseover', function(d){
d3.select(this).style("height", d3.select(this).style("height")*1.10));
})
Unfortunately, this did not resolve the issue either, as there was no change in size. When logging the height of the element, it showed up as auto, indicating that I might be retrieving the height value incorrectly from the rect. What should be the correct syntax for obtaining the height?
EDIT: After experimenting with echonax's solution below, here's the full code snippet for the rect element in my stacked bar chart:
Jaar.selectAll("rect")
.data(function(d) { return d.ages; })
.enter().append("rect")
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.style("fill", function(d) { return color(d.name); })
.style("opacity", 1)
.on('mouseover', function(d){
d.color = color(d.name);
d3.select(this).style("opacity", 1);
d3.select(this).style("height", height*1.1);
d3.select(this).style("width", width*1.1);
console.log(d3.select(this).style("width"));
tip.show(d);
})
.on('mouseout', function(d) {
d3.select(this).style("opacity", 0.6);
d3.select(this).style("height", height);
d3.select(this).style("width", width);
tip.hide(d);
});