Q:

number converted to SVGAnimatedLenght

I am trying to create a very basic Object Oriented structure for creating D3 charts. Here is the code.
Without classes and function, the same code worked fine and built the chart. However, when I organize it in the above way, the values this.width and this.height get converted into SVGAnimatedLength, so I am unable to perform normal operations on them(such as this.height - yScale(x)).
I noticed that, this.width and this.height remain numbers just before the code which adds columns is encountered.
this.chart.selectAll(".bar") ... 

To reproduce, if you put a breakpoint and debug the above variables, they show up as numbers until the above code(line 38) is executed. Then suddenly, they turn into SVGAnimatedLength. 
Any help is appreciated. Thanks.  

A:

The value of this has changed within the function.
so instead of doing in line 38:
 this.chart.selectAll(".bar")
            .data(this.data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return xScale(d.letter); })
            .attr("width", xScale.rangeBand())
            .attr("y", function(d) { return yScale(d.frequency); })
            .attr("height", function(d) {
                return this.height - yScale(d.frequency);//value of this is diffrent.
            });

Do like this:
var me = this;//store the value of this in me.
        this.chart.selectAll(".bar")
            .data(this.data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return xScale(d.letter); })
            .attr("width", xScale.rangeBand())
            .attr("y", function(d) { return yScale(d.frequency); })
            .attr("height", function(d) {
                return me.height - yScale(d.frequency);//use me variable
            });
    } 
}

working code here

