Patched transition-style

mhemesath · Mar 13, 2013 · ed4807c · ed4807c
1 parent 9f4dd13
commit ed4807c
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 39 deletions.
diff --git a/Makefile b/Makefile
@@ -113,7 +113,7 @@ r2d3.core.js: \
 	lib/d3/src/core/transition-selectAll.js \
 	lib/d3/src/core/transition-filter.js \
 	lib/d3/src/core/transition-attr.js \
-	lib/d3/src/core/transition-style.js \
+	src/core/transition-style.js \
 	lib/d3/src/core/transition-text.js \
 	lib/d3/src/core/transition-remove.js \
 	lib/d3/src/core/transition-delay.js \

diff --git a/examples/d3_examples/parallel/parallel.html b/examples/d3_examples/parallel/parallel.html
@@ -7,7 +7,6 @@
 <!--[if gte IE 9]><!-->
 <script src="../../../lib/d3/d3.v2.js"></script>
 <!--<![endif]-->
-  <script type="text/javascript">
     <style type="text/css">
 
 svg {
@@ -46,6 +45,7 @@
     </style>
   </head>
   <body>
+    <script type="text/javascript">
 
 var margin = {top: 30, right: 10, bottom: 10, left: 10},
     width = 960 - margin.right - margin.left,

diff --git a/r2d3.v2.js b/r2d3.v2.js
@@ -10374,10 +10374,10 @@ d3_transitionPrototype.style = function(name, value, priority) {
 d3_transitionPrototype.styleTween = function(name, tween, priority) {
   if (arguments.length < 3) priority = "";
   return this.tween("style." + name, function(d, i) {
-    var f = tween.call(this, d, i, window.getComputedStyle(this, null).getPropertyValue(name));
+    var f = tween.call(this, d, i, this.getCurrentStyle()[name]);
     return f === d3_tweenRemove
-        ? (this.style.removeProperty(name), null)
-        : f && function(t) { this.style.setProperty(name, f(t), priority); };
+        ? (this.removeStyleProperty(name), null)
+        : f && function(t) { this.setStyleProperty(name, f(t), priority); };
   });
 };
 d3_transitionPrototype.text = function(value) {
@@ -13158,13 +13158,19 @@ R2D3Element.prototype.removeStyleProperty = function(name) {
   this.updateProperty(name);
 }
 
+R2D3Element.prototype.getCurrentStyle = function() {
+  return this.domNode.currentStyle;
+}
+
 
 
 
 //=====================================
 // DOM APIs
 //=====================================
 
+
+
 R2D3Element.prototype.appendChild = function(node) {
   if (node.r2d3) {
     // TODO: Reposition raphael paper node

diff --git a/r2d3.v2.min.js b/r2d3.v2.min.js
diff --git a/src/core/transition-style.js b/src/core/transition-style.js
@@ -0,0 +1,32 @@
+d3_transitionPrototype.style = function(name, value, priority) {
+  var n = arguments.length;
+  if (n < 3) {
+
+    // For style(object) or style(object, string), the object specifies the
+    // names and values of the attributes to set or remove. The values may be
+    // functions that are evaluated for each element. The optional string
+    // specifies the priority.
+    if (typeof name !== "string") {
+      if (n < 2) value = "";
+      for (priority in name) this.styleTween(priority, d3_tweenByName(name[priority], priority), value);
+      return this;
+    }
+
+    // For style(string, string) or style(string, function), use the default
+    // priority. The priority is ignored for style(string, null).
+    priority = "";
+  }
+
+  // Otherwise, a name, value and priority are specified, and handled as below.
+  return this.styleTween(name, d3_tweenByName(value, name), priority);
+};
+
+d3_transitionPrototype.styleTween = function(name, tween, priority) {
+  if (arguments.length < 3) priority = "";
+  return this.tween("style." + name, function(d, i) {
+    var f = tween.call(this, d, i, this.getCurrentStyle()[name]);
+    return f === d3_tweenRemove
+        ? (this.removeStyleProperty(name), null)
+        : f && function(t) { this.setStyleProperty(name, f(t), priority); };
+  });
+};
diff --git a/src/raphael/element.js b/src/raphael/element.js
@@ -350,13 +350,19 @@ R2D3Element.prototype.removeStyleProperty = function(name) {
   this.updateProperty(name);
 }
 
+R2D3Element.prototype.getCurrentStyle = function() {
+  return this.domNode.currentStyle;
+}
+
 
 
 
 //=====================================
 // DOM APIs
 //=====================================
 
+
+
 R2D3Element.prototype.appendChild = function(node) {
   if (node.r2d3) {
     // TODO: Reposition raphael paper node

diff --git a/tests/core/group-tests.js b/tests/core/group-tests.js
@@ -93,15 +93,4 @@ test('insert on group with matching element', function() {
       circle = g.insert('circle', 'rect');
 
   equal(g.selectAll('circle').length, 1);
-});
-
-
-test('inherit styles from group', function() {
-  var svg = d3.select('#group').append('svg'),
-      g = svg.append('g');
-
-  g.style('fill', '#ffffff');
-  var rect = g.append('rect');
-  equal(rect.node().attr('fill'), '#ffffff');
-
-})
+});