D3: Strange behavior with transition() when set a value of percentage

[doraeimo]

some code go like this:

var percent=80
d3.select("#some-div")
.style("width",0)
.transition()
.duration("800")
.style("width",percent+"%")

If I calculate it as an exact value first, it'll be OK.

[mbostock]

This is the expected behavior. As described in Working with Transitions and the API reference, transition.style uses computed style values. In the case of the width style, that’s in pixels rather than percentages. So you either need to use styleTween to specify the starting value explicitly, or specify the ending style value in a manner consistent with its computed value, i.e., pixels.

[doraeimo]

Thanks very much!

[tomasfejfar]

In case someone lands here - this is my working styleTween:

.styleTween('width', function (d, i, a) {
    var from = this.style.width, // 10% 
        to = x(d); //85%
    return d3.interpolateString(from, to);
});