Use inline style value, if present.

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

By not computing the style value in the common case where an inline style is
present, this is faster, but more importantly it is more predictable since a
computed value can be surprisingly different from an inline value, such as when
the inline value is specified as a percentage.

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

README.md

@@ -245,7 +245,7 @@ This method is useful to specify a custom interpolator, such as one that underst
 
 <a name="transition_style" href="#transition_style">#</a> <i>transition</i>.<b>style</b>(<i>name</i>, <i>value</i>[, <i>priority</i>]) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/style.js "Source")
 
-For each selected element, assigns the [style tween](#transition_styleTween) for the style with the specified *name* to the specified target *value* with the specified *priority*. The starting value of the tween is the style’s computed value when the transition starts. The target *value* may be specified either as a constant or a function. If a function, it is immediately evaluated for each selected element, in order, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element.
+For each selected element, assigns the [style tween](#transition_styleTween) for the style with the specified *name* to the specified target *value* with the specified *priority*. The starting value of the tween is the style’s inline value if present, and otherwise its computed value, when the transition starts. The target *value* may be specified either as a constant or a function. If a function, it is immediately evaluated for each selected element, in order, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element.
 
 If the target value is null, the style is removed when the transition starts. Otherwise, an interpolator is chosen based on the type of the target value, using the following algorithm:
 
@@ -273,7 +273,7 @@ Or to interpolate from the current fill to blue, like [*transition*.style](#tran
 
 ```js
 transition.styleTween("fill", function() {
-  return d3.interpolateRgb(getComputedStyle(this).getPropertyValue("fill"), "blue");
+  return d3.interpolateRgb(this.style.fill, "blue");
 });
 ```
 

src/transition/style.js

@@ -1,5 +1,5 @@
 import {interpolateTransformCss as interpolateTransform} from "d3-interpolate";
-import {window} from "d3-selection";
+import {style} from "d3-selection";
 import {tweenValue} from "./tween";
 import interpolate from "./interpolate";
 
@@ -8,9 +8,8 @@ function styleRemove(name, interpolate) {
       value10,
       interpolate0;
   return function() {
-    var style = window(this).getComputedStyle(this, null),
-        value0 = style.getPropertyValue(name),
-        value1 = (this.style.removeProperty(name), style.getPropertyValue(name));
+    var value0 = style(this, name),
+        value1 = (this.style.removeProperty(name), style(this, name));
     return value0 === value1 ? null
         : value0 === value00 && value1 === value10 ? interpolate0
         : interpolate0 = interpolate(value00 = value0, value10 = value1);
@@ -27,7 +26,7 @@ function styleConstant(name, interpolate, value1) {
   var value00,
       interpolate0;
   return function() {
-    var value0 = window(this).getComputedStyle(this, null).getPropertyValue(name);
+    var value0 = style(this, name);
     return value0 === value1 ? null
         : value0 === value00 ? interpolate0
         : interpolate0 = interpolate(value00 = value0, value1);
@@ -39,10 +38,9 @@ function styleFunction(name, interpolate, value) {
       value10,
       interpolate0;
   return function() {
-    var style = window(this).getComputedStyle(this, null),
-        value0 = style.getPropertyValue(name),
+    var value0 = style(this, name),
         value1 = value(this);
-    if (value1 == null) value1 = (this.style.removeProperty(name), style.getPropertyValue(name));
+    if (value1 == null) value1 = (this.style.removeProperty(name), style(this, name));
     return value0 === value1 ? null
         : value0 === value00 && value1 === value10 ? interpolate0
         : interpolate0 = interpolate(value00 = value0, value10 = value1);