Add animate attribute

fusioncharts · Apr 4, 2017 · 4482f2f · 4482f2f
1 parent 8226ec6
commit 4482f2f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 19 deletions.
diff --git a/build/d3-scroller.js b/build/d3-scroller.js
@@ -168,7 +168,7 @@ Scroller.prototype.attr = function (key, value) {
   }
 };
 
-Scroller.prototype.drawSelf = function () {
+Scroller.prototype.drawSelf = function (animate) {
   var self = this,
     selection = this.attr('selection'),
     btnConfig = this.attr('buttons'),
@@ -303,23 +303,24 @@ Scroller.prototype.drawSelf = function () {
     self.attr('handle').width = endX - startX;
     self.emit('change');
   };
-  hue(hueTarget, true);
+  hue(hueTarget, animate);
   return this;
 };
 
-Scroller.prototype.draw = function () {
-  return this.drawSelf()
-    .drawButtons();
+Scroller.prototype.draw = function (animate) {
+  return this.drawSelf(animate)
+    .drawButtons(animate);
 };
 
-Scroller.prototype.drawButtons = function () {
+Scroller.prototype.drawButtons = function (animate) {
   var self = this,
     selection = this.attr('selection'),
     height = this.attr('height'),
     btnWidth = this.attr('buttons').width,
     width = this.attr('width'),
     margin = this.attr('margin'),
     leftMargin = margin.left,
+    duration = this.attr('animate'),
     translate = function (x, y) {
       return  'translate(' + x + COMMA + y + ')';
     },
@@ -344,9 +345,11 @@ Scroller.prototype.drawButtons = function () {
     self.emit('slide', x + handleConf.width / 2);
   });
 
-  selection
-    .selectAll('.buttonGroup g')
-    .attr('transform', function (d, index) {
+  selection = selection
+    .selectAll('.buttonGroup g');
+
+  animate && (selection = selection.transition().duration(duration));
+  selection.attr('transform', function (d, index) {
       return index ? translate(width - margin.right - btnWidth, 0) : translate(2 * leftMargin, 0);
     })
     .each(function (d, index) {

diff --git a/build/d3-scroller.min.js b/build/d3-scroller.min.js
diff --git a/src/scroller.js b/src/scroller.js
@@ -80,7 +80,7 @@ Scroller.prototype.attr = function (key, value) {
   }
 };
 
-Scroller.prototype.drawSelf = function () {
+Scroller.prototype.drawSelf = function (animate) {
   var self = this,
     selection = this.attr('selection'),
     btnConfig = this.attr('buttons'),
@@ -215,23 +215,24 @@ Scroller.prototype.drawSelf = function () {
     self.attr('handle').width = endX - startX;
     self.emit('change');
   };
-  hue(hueTarget, true);
+  hue(hueTarget, animate);
   return this;
 };
 
-Scroller.prototype.draw = function () {
-  return this.drawSelf()
-    .drawButtons();
+Scroller.prototype.draw = function (animate) {
+  return this.drawSelf(animate)
+    .drawButtons(animate);
 };
 
-Scroller.prototype.drawButtons = function () {
+Scroller.prototype.drawButtons = function (animate) {
   var self = this,
     selection = this.attr('selection'),
     height = this.attr('height'),
     btnWidth = this.attr('buttons').width,
     width = this.attr('width'),
     margin = this.attr('margin'),
     leftMargin = margin.left,
+    duration = this.attr('animate'),
     translate = function (x, y) {
       return  'translate(' + x + COMMA + y + ')';
     },
@@ -256,9 +257,11 @@ Scroller.prototype.drawButtons = function () {
     self.emit('slide', x + handleConf.width / 2);
   });
 
-  selection
-    .selectAll('.buttonGroup g')
-    .attr('transform', function (d, index) {
+  selection = selection
+    .selectAll('.buttonGroup g');
+
+  animate && (selection = selection.transition().duration(duration));
+  selection.attr('transform', function (d, index) {
       return index ? translate(width - margin.right - btnWidth, 0) : translate(2 * leftMargin, 0);
     })
     .each(function (d, index) {