Start from the inline style value, if present.

[mbostock]

Rather than always starting from the computed style value, transition.style now favors starting from the inline style value if present, and only falls back to the computed value if an inline value is not present.

By avoiding the computing style value in the common case where an inline style is present, this approach is faster, but more importantly it is more predictable since a computed value can differ surprisingly from its inline value, such as when the inline value is specified as a percentage. Consider the following element as an example:

<div style="position:absolute;left:10%;">Hello, world!</div>

Given the following transition:

d3.select("div")
  .transition()
    .duration(2500)
    .style("left", "80%");

Without this proposed change, d3-transition transitions from the computed value of 96px to the ending value of 80%. And since transition.style uses d3.interpolateString internally, and since d3.interpolateString only interpolates numbers embedded in strings and thus only applies the ending units (%), the resulting interpolator is equivalent to:

d3.interpolateString("96%", "80%") // [sad trombone]

And hence rather than transitioning from the left side of the page to the right, the div jumps to the far right of the page at the start of the transition, and then slides a little bit to the left. Oops!

With this change, the starting value is 10% and the ending value is 80%: the user-specified value is used for both the starting and ending value. For a live demonstration:

https://bl.ocks.org/mbostock/5b8a95a69a01494d731cbc2752dfadf2

Related d3/d3-selection#120. Fixes #47.

[ghost]

+1, love this change. much less suprising

[mbostock]

Merged.