Changing element size on mouseover using D3

Question

I've made a stacked bar chart in the past and I've added some neat effects on mouseover. Adding onto these I'd like to change the size of the rectangle that my user is hovering on, and return to the default size once the mouse leaves the rectangle.

The goal is to make the rectangle change in size on mouseover, therefore I started with the height by using:

        .on('mouseover', function(d){
        d3.select(this).style("height", "110%");
      } )

Expecting the rectangle to receive a height of 110% compared to it's original height. Sadly it doesn't work this way, instead it gets 110% of the div's height. So I tried using a D3 selector instead:

        .on('mouseover', function(d){
        d3.select(this).style("height", d3.select(this).style("height")*1.10));
      } )

But this didn't solve the issue either, with this code there's no change in size. If I log the height of the element I'm creating my log reads auto which leads me to believe I'm doing something wrong in obtaining the height value of the rect, what syntax should I be using?

EDIT: Trying echonax's answer below, the full code of the rect element in my stacked bar chart is as follows:

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

Answer 1

Use

d3.select(this).attr("height", (y(d.y0) - y(d.y1))*1.1);

to change the size to 110%

You can't do d3.select(this).style("height")*1.10 because d3.select(this).style("height") is a String equal to "100px" for example.

What you can do is remove the "px" from the String, multiply by 1.1 and then add "px" to the end

var newHeight = parseInt(d3.select(this).style("height"))*1.1 + "px";
d3.select(this).style("height", newHeight);