Merge branch 'development' of https://github.com/novus/nvd3 into development

11 years ago · aea9036ee2
parent d9cca0320f 0ead511d72
commit aea9036ee2
54 changed files with 789 additions and 538 deletions
--- a/2
+++ b/2
@ -50,7 +50,7 @@ nv.d3.js: Makefile

 %.min.js:: Makefile
 	rm -f $@
-	cat $(filter %.js,$^) | $(JS_COMPILER) >> $@
+	$(JS_COMPILER) nv.d3.js >> $@

 clean:
 	rm -rf nv.d3.js nv.d3.min.js
--- a/README.md
+++ b/README.md
@ -15,6 +15,7 @@ data should be properly passed in. It's a very simple change.
 * Tooltip transitions are **turned off** by default, if you update to the latest nv.d3.css.  To bring them back, add a 'with-transitions' CSS class
 to the containing chart DIV.
 * Stacked area charts have transitions again. Duration is controlled via a 'transitionDuration' property.
+* Line, cumulative, scatter, multi bar and discrete bar charts also have the 'transitionDuration' property.
 * Issue #127: Adding ability to override individual scatter plot point colors.
 * Issue #216: Exposing xRange and yRange overrides for all charts.
 * Issue #168: Adding legend.radioButtonMode(). When set to true, legend click behavior will match those of radio buttons.
--- a/examples/cumulativeLineChart.html
+++ b/examples/cumulativeLineChart.html
@ -65,6 +65,7 @@ nv.addGraph(function() {
             .y(function(d) { return d[1]/100 })
             .color(d3.scale.category10().range())
             .average(function(d) { return d.mean/100; })
+             .transitionDuration(250)
             .clipVoronoi(false);

   chart.xAxis
--- a/examples/discreteBarChart.html
+++ b/examples/discreteBarChart.html
@ -101,10 +101,11 @@ nv.addGraph(function() {
      //.staggerLabels(historicalBarChart[0].values.length > 8)
      .tooltips(false)
      .showValues(true)
+      .transitionDuration(250)
+      ;

  d3.select('#chart1 svg')
      .datum(historicalBarChart)
-    .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);
--- a/examples/lineChart.html
+++ b/examples/lineChart.html
@ -60,6 +60,8 @@ nv.addGraph(function() {
  chart
    .margin({left: 100, bottom: 100})
    .x(function(d,i) { return i })
+    .transitionDuration(250)
+    ;

  // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
  chart.xAxis
@ -75,7 +77,6 @@ nv.addGraph(function() {
  d3.select('#chart1 svg')
    //.datum([]) //for testing noData
    .datum(sinAndCos())
-    .transition().duration(500)
    .call(chart);

  //TODO: Figure out a good way to do this automatically
--- a/examples/multiBarChart.html
+++ b/examples/multiBarChart.html
@ -67,7 +67,9 @@ var negative_test_data = new d3.range(0,3).map(function(d,i) { return {
 var chart;
 nv.addGraph(function() {
    chart = nv.models.multiBarChart()
-      .barColor(d3.scale.category20().range());
+      .barColor(d3.scale.category20().range())
+      .transitionDuration(300)
+      ;

    chart.multibar
      .hideable(true);
@ -83,7 +85,7 @@ nv.addGraph(function() {

    d3.select('#chart1 svg')
        .datum(negative_test_data)
-      .transition().duration(500).call(chart);
+       .call(chart);

    nv.utils.windowResize(chart.update);

--- a/examples/scatterChart.html
+++ b/examples/scatterChart.html
@ -68,7 +68,9 @@ nv.addGraph(function() {
                .showDistY(true)
                //.height(500)
                .useVoronoi(true)
-                .color(d3.scale.category10().range());
+                .color(d3.scale.category10().range())
+                .transitionDuration(300)
+                ;

  chart.xAxis.tickFormat(d3.format('.02f'));
  chart.yAxis.tickFormat(d3.format('.02f'));
@ -78,7 +80,6 @@ nv.addGraph(function() {

  d3.select('#test1 svg')
      .datum(randomData(4,40))
-    .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);
--- a/examples/scatterPlusLineChart.html
+++ b/examples/scatterPlusLineChart.html
@ -66,7 +66,7 @@ nv.addGraph(function() {
  chart = nv.models.scatterPlusLineChart()
                .showDistX(true)
                .showDistY(true)
-                //.height(500)
+                .transitionDuration(300)
                .color(d3.scale.category10().range());

  chart.xAxis.tickFormat(d3.format('.02f'))
@ -74,7 +74,6 @@ nv.addGraph(function() {

  d3.select('#test1 svg')
      .datum(nv.log(randomData(4,40)))
-    .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);
--- a/examples/stackedAreaChart.html
+++ b/examples/stackedAreaChart.html
@ -199,7 +199,7 @@ nv.addGraph(function() {
                .x(function(d) { return d[0] })
                .y(function(d) { return d[1] })
                .color(keyColor)
-                .transitionDuration(300);
+                .transitionDuration(250);
                //.clipEdge(true);

 // chart.stacked.scatter.clipVoronoi(false);
@ -225,7 +225,8 @@ nv.addGraph(function() {
  var chart = nv.models.stackedAreaChart()
                .x(function(d) { return d[0] })
                .y(function(d) { return d[1] })
-                .color(keyColor);
+                .color(keyColor)
+                ;
                //.clipEdge(true);

  chart.xAxis
--- a/nv.d3.js
+++ b/nv.d3.js
--- a/nv.d3.min.js
+++ b/nv.d3.min.js
--- a/src/core.js
+++ b/src/core.js
@ -2,7 +2,7 @@
 var nv = window.nv || {};


-nv.version = '1.1.1b';
+nv.version = '1.1.5b';
 nv.dev = true //set false when in production

 window.nv = nv;
--- a/src/interactiveLayer.js
+++ b/src/interactiveLayer.js
@ -7,6 +7,7 @@ the rectangle. The dispatch is given one object which contains the mouseX/Y loca
 It also has 'pointXValue', which is the conversion of mouseX to the x-axis scale.
 */
 nv.interactiveGuideline = function() {
+	"use strict";
 	var tooltip = nv.models.tooltip();
 	//Public settings
 	var width = null
@ -24,8 +25,7 @@ nv.interactiveGuideline = function() {
 	;

 	//Private variables
-	var previousXCoordinate = null
-	isMSIE = navigator.userAgent.indexOf("MSIE") !== -1  //Check user-agent for Microsoft Internet Explorer.
+	var isMSIE = navigator.userAgent.indexOf("MSIE") !== -1  //Check user-agent for Microsoft Internet Explorer.
 	;


@ -196,6 +196,7 @@ Has the following known issues:
   * Won't work if there are duplicate x coordinate values.
 */
 nv.interactiveBisect = function (values, searchVal, xAccessor) {
+	  "use strict";
      if (! values instanceof Array) return null;
      if (typeof xAccessor !== 'function') xAccessor = function(d,i) { return d.x;}

--- a/src/models/axis.js
+++ b/src/models/axis.js
@ -1,5 +1,5 @@
 nv.models.axis = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
@ -19,6 +19,7 @@ nv.models.axis = function() {
    , staggerLabels = false
    , isOrdinal = false
    , ticks = null
+    , transitionDuration = 250
    ;

  axis
@ -64,8 +65,7 @@ nv.models.axis = function() {
      //TODO: consider calculating width/height based on whether or not label is added, for reference in charts using this component


-      d3.transition(g)
-          .call(axis);
+      g.transition().duration(transitionDuration).call(axis);

      scale0 = scale0 || axis.scale();

@ -390,6 +390,12 @@ nv.models.axis = function() {
    return chart;
  };

+  chart.transitionDuration = function(_) {
+      if (!arguments.length) return transitionDuration;
+      transitionDuration = _;
+      return chart;
+  };
+

  //============================================================

--- a/src/models/boilerplate.js
+++ b/src/models/boilerplate.js
@ -1,6 +1,6 @@

 nv.models.chartName = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/bullet.js
+++ b/src/models/bullet.js
@ -4,7 +4,7 @@
 // http://projects.instantcognition.com/protovis/bulletchart/

 nv.models.bullet = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/bulletChart.js
+++ b/src/models/bulletChart.js
@ -3,7 +3,7 @@
 // based on the work of Clint Ivy, Jamie Love, and Jason Davies.
 // http://projects.instantcognition.com/protovis/bulletchart/
 nv.models.bulletChart = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/cumulativeLineChart.js
+++ b/src/models/cumulativeLineChart.js
@ -1,6 +1,6 @@

 nv.models.cumulativeLineChart = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
@ -221,7 +221,7 @@ nv.models.cumulativeLineChart = function() {

      //------------------------------------------------------------
      // Setup containers and skeleton of chart
-
+      var interactivePointerEvents = (useInteractiveGuideline) ? "none" : "all";
      var wrap = container.selectAll('g.nv-wrap.nv-cumulativeLine').data([data]);
      var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-cumulativeLine').append('g');
      var g = wrap.select('g');
@ -230,7 +230,7 @@ nv.models.cumulativeLineChart = function() {
      gEnter.append('g').attr('class', 'nv-x nv-axis').style("pointer-events","none");
      gEnter.append('g').attr('class', 'nv-y nv-axis');
      gEnter.append('g').attr('class', 'nv-background');
-      gEnter.append('g').attr('class', 'nv-linesWrap');
+      gEnter.append('g').attr('class', 'nv-linesWrap').style("pointer-events",interactivePointerEvents);
      gEnter.append('g').attr('class', 'nv-avgLinesWrap').style("pointer-events","none");
      gEnter.append('g').attr('class', 'nv-legendWrap');
      gEnter.append('g').attr('class', 'nv-controlsWrap');
@ -439,8 +439,13 @@ nv.models.cumulativeLineChart = function() {
      function updateZero() {
        indexLine
          .data([index]);
-
+        
+        //When dragging the index line, turn off line transitions.
+        // Then turn them back on when done dragging.
+        var oldDuration = chart.transitionDuration();
+        chart.transitionDuration(0);
        container.call(chart);
+        chart.transitionDuration(oldDuration);
      }

      g.select('.nv-background rect')
@ -716,6 +721,14 @@ nv.models.cumulativeLineChart = function() {
     return chart;
  };

+  chart.transitionDuration = function(_) {
+    if (!arguments.length) return lines.transitionDuration();
+    lines.transitionDuration(_);
+    xAxis.transitionDuration(_);
+    yAxis.transitionDuration(_);
+    return chart;
+  };
+
  //============================================================


--- a/src/models/discreteBar.js
+++ b/src/models/discreteBar.js
@ -1,6 +1,6 @@
 //TODO: consider deprecating by adding necessary features to multiBar model
 nv.models.discreteBar = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
@ -23,6 +23,7 @@ nv.models.discreteBar = function() {
    , yRange
    , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout')
    , rectClass = 'discreteBar'
+    , transitionDuration = 250
    ;

  //============================================================
@ -104,14 +105,16 @@ nv.models.discreteBar = function() {
      groups.enter().append('g')
          .style('stroke-opacity', 1e-6)
          .style('fill-opacity', 1e-6);
-      d3.transition(groups.exit())
+      groups.exit()
+          .transition().duration(transitionDuration)
          .style('stroke-opacity', 1e-6)
          .style('fill-opacity', 1e-6)
          .remove();
      groups
          .attr('class', function(d,i) { return 'nv-group nv-series-' + i })
          .classed('hover', function(d) { return d.hover });
-      d3.transition(groups)
+      groups
+          .transition().duration(transitionDuration)
          .style('stroke-opacity', 1)
          .style('fill-opacity', .75);

@ -196,7 +199,8 @@ nv.models.discreteBar = function() {
        .select('rect')
          .attr('class', rectClass)
          .attr('width', x.rangeBand() * .9 / data.length);
-      d3.transition(bars)
+      bars.transition()
+          .duration(transitionDuration)
        //.delay(function(d,i) { return i * 1200 / data[0].values.length })
          .attr('transform', function(d,i) {
            var left = x(getX(d,i)) + x.rangeBand() * .05,
@ -333,7 +337,13 @@ nv.models.discreteBar = function() {
    if (!arguments.length) return rectClass;
    rectClass = _;
    return chart;
-  }
+  };
+
+  chart.transitionDuration = function(_) {
+    if (!arguments.length) return transitionDuration;
+    transitionDuration = _;
+    return chart;
+  };
  //============================================================


--- a/src/models/discreteBarChart.js
+++ b/src/models/discreteBarChart.js
@ -1,6 +1,6 @@

 nv.models.discreteBarChart = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
@ -314,6 +314,14 @@ nv.models.discreteBarChart = function() {
    return chart;
  };

+  chart.transitionDuration = function(_) {
+    if (!arguments.length) return discretebar.transitionDuration();
+    discretebar.transitionDuration(_);
+    xAxis.transitionDuration(_);
+    yAxis.transitionDuration(_);
+    return chart;
+  };
+
  //============================================================


--- a/src/models/distribution.js
+++ b/src/models/distribution.js
@ -1,6 +1,6 @@

 nv.models.distribution = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
@ -13,6 +13,7 @@ nv.models.distribution = function() {
    , color = nv.utils.defaultColor()
    , scale = d3.scale.linear()
    , domain
+    , transitionDuration = 250
    ;

  //============================================================
@ -68,7 +69,8 @@ nv.models.distribution = function() {
      dist.enter().append('line')
          .attr(axis + '1', function(d,i) { return scale0(getData(d,i)) })
          .attr(axis + '2', function(d,i) { return scale0(getData(d,i)) })
-      d3.transition(distWrap.exit().selectAll('line.nv-dist' + axis))
+      distWrap.exit().selectAll('line.nv-dist' + axis)
+          .transition().duration(transitionDuration)
          .attr(axis + '1', function(d,i) { return scale(getData(d,i)) })
          .attr(axis + '2', function(d,i) { return scale(getData(d,i)) })
          .style('stroke-opacity', 0)
@ -77,7 +79,8 @@ nv.models.distribution = function() {
          .attr('class', function(d,i) { return 'nv-dist' + axis + ' nv-dist' + axis + '-' + i })
          .attr(naxis + '1', 0)
          .attr(naxis + '2', size);
-      d3.transition(dist)
+      dist
+          .transition().duration(transitionDuration)
          .attr(axis + '1', function(d,i) { return scale(getData(d,i)) })
          .attr(axis + '2', function(d,i) { return scale(getData(d,i)) })

@ -139,6 +142,12 @@ nv.models.distribution = function() {
    return chart;
  };

+  chart.transitionDuration = function(_) {
+    if (!arguments.length) return transitionDuration;
+    transitionDuration = _;
+    return chart;
+  };
+
  //============================================================


--- a/src/models/historicalBar.js
+++ b/src/models/historicalBar.js
@ -1,6 +1,6 @@
 //TODO: consider deprecating and using multibar with single series for this
 nv.models.historicalBar = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/historicalBarChart.js
+++ b/src/models/historicalBarChart.js
@ -1,6 +1,6 @@

 nv.models.historicalBarChart = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/indentedTree.js
+++ b/src/models/indentedTree.js
@ -1,5 +1,5 @@
 nv.models.indentedTree = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/legend.js
+++ b/src/models/legend.js
@ -1,5 +1,5 @@
 nv.models.legend = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
@ -131,7 +131,7 @@ nv.models.legend = function() {
          columnWidths = [];
          seriesPerRow--;

-          for (k = 0; k < seriesWidths.length; k++) {
+          for (var k = 0; k < seriesWidths.length; k++) {
            if (seriesWidths[k] > (columnWidths[k % seriesPerRow] || 0) )
              columnWidths[k % seriesPerRow] = seriesWidths[k];
          }
--- a/src/models/line.js
+++ b/src/models/line.js
@ -1,6 +1,6 @@

 nv.models.line = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
@ -20,6 +20,7 @@ nv.models.line = function() {
    , x //can be accessed via chart.xScale()
    , y //can be accessed via chart.yScale()
    , interpolate = "linear" // controls the line interpolation
+    , transitionDuration = 250  //override the transition duration
    ;

  scatter
@ -84,7 +85,7 @@ nv.models.line = function() {
      var scatterWrap = wrap.select('.nv-scatterWrap');
          //.datum(data); // Data automatically trickles down from the wrap

-      d3.transition(scatterWrap).call(scatter);
+      scatterWrap.transition().call(scatter);



@ -108,7 +109,8 @@ nv.models.line = function() {
      groups.enter().append('g')
          .style('stroke-opacity', 1e-6)
          .style('fill-opacity', 1e-6);
-      d3.transition(groups.exit())
+      groups.exit()
+          .transition().duration(transitionDuration)
          .style('stroke-opacity', 1e-6)
          .style('fill-opacity', 1e-6)
          .remove();
@ -117,7 +119,8 @@ nv.models.line = function() {
          .classed('hover', function(d) { return d.hover })
          .style('fill', function(d,i){ return color(d, i) })
          .style('stroke', function(d,i){ return color(d, i)});
-      d3.transition(groups)
+      groups
+          .transition().duration(transitionDuration)
          .style('stroke-opacity', 1)
          .style('fill-opacity', .5);

@ -137,7 +140,8 @@ nv.models.line = function() {
                //.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
                .apply(this, [d.values])
          });
-      d3.transition(groups.exit().selectAll('path.nv-area'))
+      groups.exit().selectAll('path.nv-area')
+          .transition().duration(transitionDuration)
          .attr('d', function(d) {
            return d3.svg.area()
                .interpolate(interpolate)
@ -148,7 +152,8 @@ nv.models.line = function() {
                //.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
                .apply(this, [d.values])
          });
-      d3.transition(areaPaths)
+      areaPaths
+          .transition().duration(transitionDuration)
          .attr('d', function(d) {
            return d3.svg.area()
                .interpolate(interpolate)
@ -173,7 +178,8 @@ nv.models.line = function() {
              .x(function(d,i) { return nv.utils.NaNtoZero(x0(getX(d,i))) })
              .y(function(d,i) { return nv.utils.NaNtoZero(y0(getY(d,i))) })
          );
-      d3.transition(groups.exit().selectAll('path.nv-line'))
+      groups.exit().selectAll('path.nv-line')
+          .transition().duration(transitionDuration)
          .attr('d',
            d3.svg.line()
              .interpolate(interpolate)
@ -181,7 +187,8 @@ nv.models.line = function() {
              .x(function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
              .y(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
          );
-      d3.transition(linePaths)
+      linePaths
+          .transition().duration(transitionDuration)
          .attr('d',
            d3.svg.line()
              .interpolate(interpolate)
@ -278,6 +285,12 @@ nv.models.line = function() {
    return chart;
  };

+  chart.transitionDuration = function(_) {
+      if (!arguments.length) return transitionDuration;
+      transitionDuration = _;
+      return chart;
+  };
+
  //============================================================


--- a/src/models/lineChart.js
+++ b/src/models/lineChart.js
@ -1,6 +1,6 @@

 nv.models.lineChart = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
@ -211,7 +211,8 @@ nv.models.lineChart = function() {

        g.select('.nv-x.nv-axis')
            .attr('transform', 'translate(0,' + y.range()[0] + ')');
-        d3.transition(g.select('.nv-x.nv-axis'))
+        g.select('.nv-x.nv-axis')
+            .transition()
            .call(xAxis);
      }

@ -221,7 +222,8 @@ nv.models.lineChart = function() {
          .ticks( availableHeight / 36 )
          .tickSize( -availableWidth, 0);

-        d3.transition(g.select('.nv-y.nv-axis'))
+        g.select('.nv-y.nv-axis')
+            .transition()
            .call(yAxis);
      }
      //------------------------------------------------------------
@ -341,7 +343,8 @@ nv.models.lineChart = function() {
  chart.yAxis = yAxis;
  chart.interactiveLayer = interactiveLayer;

-  d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xScale', 'yScale', 'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'useVoronoi','id', 'interpolate');
+  d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xScale', 'yScale', 'xDomain', 'yDomain', 'xRange', 'yRange'
+    , 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'useVoronoi','id', 'interpolate');

  chart.margin = function(_) {
    if (!arguments.length) return margin;
@ -436,6 +439,14 @@ nv.models.lineChart = function() {
    return chart;
  };

+  chart.transitionDuration = function(_) {
+    if (!arguments.length) return lines.transitionDuration();
+    lines.transitionDuration(_);
+    xAxis.transitionDuration(_);
+    yAxis.transitionDuration(_);
+    return chart;
+  };
+
  //============================================================


--- a/src/models/linePlusBarChart.js
+++ b/src/models/linePlusBarChart.js
@ -1,6 +1,6 @@

 nv.models.linePlusBarChart = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/linePlusBarWithFocusChart.js
+++ b/src/models/linePlusBarWithFocusChart.js
@ -1,6 +1,6 @@

 nv.models.linePlusBarWithFocusChart = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/lineWithFisheye.js
+++ b/src/models/lineWithFisheye.js
@ -1,5 +1,6 @@

 nv.models.line = function() {
+  "use strict";
  //Default Settings
  var margin = {top: 0, right: 0, bottom: 0, left: 0},
      width = 960,
--- a/src/models/lineWithFisheyeChart.js
+++ b/src/models/lineWithFisheyeChart.js
@ -1,5 +1,6 @@

 nv.models.lineChart = function() {
+  "use strict";
  var margin = {top: 30, right: 20, bottom: 50, left: 60},
      color = nv.utils.defaultColor(),
      width = null, 
--- a/src/models/lineWithFocusChart.js
+++ b/src/models/lineWithFocusChart.js
@ -1,6 +1,6 @@

 nv.models.lineWithFocusChart = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
@ -271,7 +271,7 @@ nv.models.lineWithFocusChart = function() {
          .attr('y', 0)
          .attr('height', availableHeight2);

-      gBrush = g.select('.nv-x.nv-brush')
+      var gBrush = g.select('.nv-x.nv-brush')
          .call(brush);
      gBrush.selectAll('rect')
          //.attr('y', -5)
@ -366,7 +366,7 @@ nv.models.lineWithFocusChart = function() {

      function onBrush() {
        brushExtent = brush.empty() ? null : brush.extent();
-        extent = brush.empty() ? x2.domain() : brush.extent();
+        var extent = brush.empty() ? x2.domain() : brush.extent();

        //The brush extent cannot be less than one.  If it is, don't update the line chart.
        if (Math.abs(extent[0] - extent[1]) <= 1) {
--- a/src/models/multiBar.js
+++ b/src/models/multiBar.js
@ -1,6 +1,6 @@

 nv.models.multiBar = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
@ -26,6 +26,7 @@ nv.models.multiBar = function() {
    , xRange
    , yRange
    , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout')
+    , transitionDuration = 250
    ;

  //============================================================
@ -164,11 +165,16 @@ nv.models.multiBar = function() {
      groups.enter().append('g')
          .style('stroke-opacity', 1e-6)
          .style('fill-opacity', 1e-6);
-      d3.transition(groups.exit())
+      groups.exit()
+        .transition().duration(transitionDuration)
          //.style('stroke-opacity', 1e-6)
          //.style('fill-opacity', 1e-6)
        .selectAll('rect.nv-bar')
-        .delay(function(d,i) { return i * delay/ data[0].values.length })
+        .delay(function(d,i) { 
+          if (transitionDuration <= 10) return 0;
+          else
+             return i * delay/ data[0].values.length;
+        })
          .attr('y', function(d) { return stacked ? y0(d.y0) : y0(0) })
          .attr('height', 0)
          .remove();
@ -177,7 +183,8 @@ nv.models.multiBar = function() {
          .classed('hover', function(d) { return d.hover })
          .style('fill', function(d,i){ return color(d, i) })
          .style('stroke', function(d,i){ return color(d, i) });
-      d3.transition(groups)
+      groups
+          .transition().duration(transitionDuration)
          .style('stroke-opacity', 1)
          .style('fill-opacity', .75);

@ -264,7 +271,12 @@ nv.models.multiBar = function() {

      if (stacked)
          bars.transition()
-            .delay(function(d,i) { return i * delay / data[0].values.length })
+            .duration(transitionDuration)
+            .delay(function(d,i) { 
+                if (transitionDuration <= 10) return 0;
+                else
+                  return i * delay / data[0].values.length;
+            })
            .attr('y', function(d,i) {

              return y((stacked ? d.y1 : 0));
@ -273,18 +285,25 @@ nv.models.multiBar = function() {
              return Math.max(Math.abs(y(d.y + (stacked ? d.y0 : 0)) - y((stacked ? d.y0 : 0))),1);
            })
            .transition()
+            .duration(transitionDuration)
            .attr('x', function(d,i) {
                  return stacked ? 0 : (d.series * x.rangeBand() / data.length )
            })
            .attr('width', x.rangeBand() / (stacked ? 1 : data.length) );
      else
          bars.transition()
-            .delay(function(d,i) { return i * delay/ data[0].values.length })
+            .duration(transitionDuration)
+            .delay(function(d,i) { 
+              if (transitionDuration <= 10) return 0;
+              else
+                return i * delay/ data[0].values.length;
+            })
            .attr('x', function(d,i) {
              return d.series * x.rangeBand() / data.length
            })
            .attr('width', x.rangeBand() / data.length)
            .transition()
+            .duration(transitionDuration)
            .attr('y', function(d,i) {
                return getY(d,i) < 0 ?
                        y(0) :
@ -437,6 +456,13 @@ nv.models.multiBar = function() {
    return chart;
  };

+  chart.transitionDuration = function(_) {
+    if (!arguments.length) return transitionDuration;
+    transitionDuration = _;
+    if (_ === 0) transitionDuration = 10;
+    return chart;
+  };
+
  //============================================================


--- a/src/models/multiBarChart.js
+++ b/src/models/multiBarChart.js
@ -1,6 +1,6 @@

 nv.models.multiBarChart = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
@ -506,6 +506,14 @@ nv.models.multiBarChart = function() {
    return chart;
  };

+  chart.transitionDuration = function(_) {
+    if (!arguments.length) return multibar.transitionDuration();
+    multibar.transitionDuration(_);
+    xAxis.transitionDuration(_);
+    yAxis.transitionDuration(_);
+    return chart;
+  };
+
  //============================================================


--- a/src/models/multiBarHorizontal.js
+++ b/src/models/multiBarHorizontal.js
@ -1,6 +1,6 @@

 nv.models.multiBarHorizontal = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/multiBarHorizontalChart.js
+++ b/src/models/multiBarHorizontalChart.js
@ -1,6 +1,6 @@

 nv.models.multiBarHorizontalChart = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/multiBarTimeSeries.js
+++ b/src/models/multiBarTimeSeries.js
@ -1,5 +1,5 @@
 nv.models.multiBarTimeSeries = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/multiBarTimeSeriesChart.js
+++ b/src/models/multiBarTimeSeriesChart.js
@ -1,5 +1,5 @@
 nv.models.multiBarTimeSeriesChart = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/multiChart.js
+++ b/src/models/multiChart.js
@ -1,5 +1,5 @@
 nv.models.multiChart = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/ohlcBar.js
+++ b/src/models/ohlcBar.js
@ -1,6 +1,6 @@

 nv.models.ohlcBar = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/parallelCoordinates.js
+++ b/src/models/parallelCoordinates.js
@ -3,7 +3,7 @@
 // http://bl.ocks.org/jasondavies/1341281

 nv.models.parallelCoordinates = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/pie.js
+++ b/src/models/pie.js
@ -1,5 +1,5 @@
 nv.models.pie = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/pieChart.js
+++ b/src/models/pieChart.js
@ -1,5 +1,5 @@
 nv.models.pieChart = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/scatter.js
+++ b/src/models/scatter.js
@ -1,6 +1,6 @@

 nv.models.scatter = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
@ -38,6 +38,7 @@ nv.models.scatter = function() {
    , singlePoint  = false
    , dispatch     = d3.dispatch('elementClick', 'elementMouseover', 'elementMouseout')
    , useVoronoi   = true
+    , transitionDuration = 250
    ;

  //============================================================
@ -106,7 +107,7 @@ nv.models.scatter = function() {

      if (y.domain()[0] === y.domain()[1])
        y.domain()[0] ?
-            y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])
+            y.domain([y.domain()[0] - y.domain()[0] * 0.01, y.domain()[1] + y.domain()[1] * 0.01])
          : y.domain([-1,1]);

      if ( isNaN(x.domain()[0])) {
@ -341,14 +342,16 @@ nv.models.scatter = function() {
      groups.enter().append('g')
          .style('stroke-opacity', 1e-6)
          .style('fill-opacity', 1e-6);
-      d3.transition(groups.exit())
+      groups.exit()
+          .transition().duration(transitionDuration)
          .style('stroke-opacity', 1e-6)
          .style('fill-opacity', 1e-6)
          .remove();
      groups
          .attr('class', function(d,i) { return 'nv-group nv-series-' + i })
          .classed('hover', function(d) { return d.hover });
-      d3.transition(groups)
+      groups
+          .transition().duration(transitionDuration)
          .style('fill', function(d,i) { return color(d, i) })
          .style('stroke', function(d,i) { return color(d, i) })
          .style('stroke-opacity', 1)
@ -367,6 +370,7 @@ nv.models.scatter = function() {
            .attr('r', function(d,i) { return Math.sqrt(z(getSize(d,i))/Math.PI) });
        points.exit().remove();
        groups.exit().selectAll('path.nv-point').transition()
+            .duration(transitionDuration)
            .attr('cx', function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
            .attr('cy', function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
            .remove();
@ -378,6 +382,7 @@ nv.models.scatter = function() {
            ;
        });
        points.transition()
+            .duration(transitionDuration)
            .attr('cx', function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
            .attr('cy', function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
            .attr('r', function(d,i) { return Math.sqrt(z(getSize(d,i))/Math.PI) });
@ -398,7 +403,8 @@ nv.models.scatter = function() {
                .size(function(d,i) { return z(getSize(d,i)) })
            );
        points.exit().remove();
-        d3.transition(groups.exit().selectAll('path.nv-point'))
+        groups.exit().selectAll('path.nv-point')
+            .transition().duration(transitionDuration)
            .attr('transform', function(d,i) {
              return 'translate(' + x(getX(d,i)) + ',' + y(getY(d,i)) + ')'
            })
@ -411,6 +417,7 @@ nv.models.scatter = function() {
            ;
        });
        points.transition()
+            .duration(transitionDuration)
            .attr('transform', function(d,i) {
              //nv.log(d,i,getX(d,i), x(getX(d,i)));
              return 'translate(' + x(getX(d,i)) + ',' + y(getY(d,i)) + ')'
@ -668,6 +675,12 @@ nv.models.scatter = function() {
    return chart;
  };

+  chart.transitionDuration = function(_) {
+    if (!arguments.length) return transitionDuration;
+    transitionDuration = _;
+    return chart;
+  };
+
  //============================================================


--- a/src/models/scatterChart.js
+++ b/src/models/scatterChart.js
@ -1,6 +1,6 @@

 nv.models.scatterChart = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
@ -232,29 +232,35 @@ nv.models.scatterChart = function() {
          .height(availableHeight)
          .color(data.map(function(d,i) {
            return d.color || color(d, i);
-          }).filter(function(d,i) { return !data[i].disabled }))
-          .xDomain(null)
-          .yDomain(null)
+          }).filter(function(d,i) { return !data[i].disabled }));
+
+      if (xPadding !== 0)
+        scatter.xDomain(null);
+
+      if (yPadding !== 0)
+        scatter.yDomain(null);

      wrap.select('.nv-scatterWrap')
          .datum(data.filter(function(d) { return !d.disabled }))
          .call(scatter);

-
      //Adjust for x and y padding
-      if (xPadding) {
+      if (xPadding !== 0) {
        var xRange = x.domain()[1] - x.domain()[0];
        scatter.xDomain([x.domain()[0] - (xPadding * xRange), x.domain()[1] + (xPadding * xRange)]);
      }

-      if (yPadding) {
+      if (yPadding !== 0) {
        var yRange = y.domain()[1] - y.domain()[0];
        scatter.yDomain([y.domain()[0] - (yPadding * yRange), y.domain()[1] + (yPadding * yRange)]);
      }

-      wrap.select('.nv-scatterWrap')
-          .datum(data.filter(function(d) { return !d.disabled }))
-          .call(scatter);
+      //Only need to update the scatter again if x/yPadding changed the domain.
+      if (yPadding !== 0 || xPadding !== 0) {
+        wrap.select('.nv-scatterWrap')
+            .datum(data.filter(function(d) { return !d.disabled }))
+            .call(scatter);
+      }

      //------------------------------------------------------------

@ -608,6 +614,16 @@ nv.models.scatterChart = function() {
    return chart;
  };

+  chart.transitionDuration = function(_) {
+    if (!arguments.length) return scatter.transitionDuration();
+    scatter.transitionDuration(_);
+    xAxis.transitionDuration(_);
+    yAxis.transitionDuration(_);
+    distX.transitionDuration(_);
+    distY.transitionDuration(_);
+    return chart;
+  };
+
  //============================================================


--- a/src/models/scatterPlusLineChart.js
+++ b/src/models/scatterPlusLineChart.js
@ -1,6 +1,6 @@

 nv.models.scatterPlusLineChart = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
@ -603,6 +603,16 @@ nv.models.scatterPlusLineChart = function() {
    return chart;
  };

+  chart.transitionDuration = function(_) {
+    if (!arguments.length) return scatter.transitionDuration();
+    scatter.transitionDuration(_);
+    xAxis.transitionDuration(_);
+    yAxis.transitionDuration(_);
+    distX.transitionDuration(_);
+    distY.transitionDuration(_);
+    return chart;
+  };
+
  //============================================================


--- a/src/models/sparkline.js
+++ b/src/models/sparkline.js
@ -1,6 +1,6 @@

 nv.models.sparkline = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/sparklinePlus.js
+++ b/src/models/sparklinePlus.js
@ -1,6 +1,6 @@

 nv.models.sparklinePlus = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/stackedArea.js
+++ b/src/models/stackedArea.js
@ -1,6 +1,6 @@

 nv.models.stackedArea = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
--- a/src/models/stackedAreaChart.js
+++ b/src/models/stackedAreaChart.js
@ -1,6 +1,6 @@

 nv.models.stackedAreaChart = function() {
-
+  "use strict";
  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------
@ -442,7 +442,7 @@ nv.models.stackedAreaChart = function() {
  chart.yAxis = yAxis;
  chart.interactiveLayer = interactiveLayer;

-  d3.rebind(chart, stacked, 'x', 'y', 'size', 'xScale', 'yScale', 'xDomain', 'yDomain', 'xRange', 'yRange', 'sizeDomain', 'interactive', 'useVoronoi', 'offset', 'order', 'style', 'clipEdge', 'forceX', 'forceY', 'forceSize', 'interpolate','transitionDuration');
+  d3.rebind(chart, stacked, 'x', 'y', 'size', 'xScale', 'yScale', 'xDomain', 'yDomain', 'xRange', 'yRange', 'sizeDomain', 'interactive', 'useVoronoi', 'offset', 'order', 'style', 'clipEdge', 'forceX', 'forceY', 'forceSize', 'interpolate');

  chart.margin = function(_) {
    if (!arguments.length) return margin;
@ -550,6 +550,14 @@ nv.models.stackedAreaChart = function() {
    return chart;
  };

+  chart.transitionDuration = function(_) {
+    if (!arguments.length) return stacked.transitionDuration();
+    stacked.transitionDuration(_);
+    xAxis.transitionDuration(_);
+    yAxis.transitionDuration(_);
+    return chart;
+  };
+
  yAxis.setTickFormat = yAxis.tickFormat;

  yAxis.tickFormat = function(_) {
@ -558,6 +566,7 @@ nv.models.stackedAreaChart = function() {
    return yAxis;
  };

+
  //============================================================

  return chart;
--- a/src/tooltip.js
+++ b/src/tooltip.js
@ -5,7 +5,7 @@ window.nv.tooltip.show is the old tooltip code.
 window.nv.tooltip.* also has various helper methods.
 */
 (function() {
-
+  "use strict";
  window.nv.tooltip = {};

  /* Model which can be instantiated to handle tooltip rendering.
@ -154,8 +154,11 @@ window.nv.tooltip.* also has various helper methods.
                    svgOffset.top = Math.abs(svgBound.top - chartBound.top);
                    svgOffset.left = Math.abs(svgBound.left - chartBound.left);
                }
-                left += chartContainer.offsetLeft + svgOffset.left;
-                top += chartContainer.offsetTop + svgOffset.top;
+                //If the parent container is an overflow <div> with scrollbars, subtract the scroll offsets.
+                //You need to also add any offset between the <svg> element and its containing <div>
+                //Finally, add any offset of the containing <div> on the whole page.
+                left += chartContainer.offsetLeft + svgOffset.left - 2*chartContainer.scrollLeft;
+                top += chartContainer.offsetTop + svgOffset.top - 2*chartContainer.scrollTop;
            }

            if (snapDistance && snapDistance > 0) {
@ -264,6 +267,7 @@ window.nv.tooltip.* also has various helper methods.


  //Original tooltip.show function. Kept for backward compatibility.
+  // pos = [left,top]
  nv.tooltip.show = function(pos, content, gravity, dist, parentContainer, classes) {
      
        //Create new tooltip div if it doesn't exist on DOM.
@ -281,7 +285,12 @@ window.nv.tooltip.* also has various helper methods.
        container.style.opacity = 0;
        container.innerHTML = content;
        body.appendChild(container);
-
+        
+        //If the parent container is an overflow <div> with scrollbars, subtract the scroll offsets.
+        if (parentContainer) {
+           pos[0] = pos[0] - parentContainer.scrollLeft;
+           pos[1] = pos[1] - parentContainer.scrollTop;
+        }
        nv.tooltip.calcTooltipPosition(pos, gravity, dist, container);
  };

@ -320,7 +329,7 @@ window.nv.tooltip.* also has various helper methods.
  };

  //Global utility function to render a tooltip on the DOM.
-  //pos = [X,Y] coordinates of where to place the tooltip, relative to the SVG chart container.
+  //pos = [left,top] coordinates of where to place the tooltip, relative to the SVG chart container.
  //gravity = how to orient the tooltip
  //dist = how far away from the mouse to place tooltip
  //container = tooltip DIV
--- a/test/ScatterChartTest.html
+++ b/test/ScatterChartTest.html
@ -67,6 +67,14 @@
    Scatter plus line: y=-0.5x + 1.0;
    <svg></svg>
  </div>
+  <div id="test14" class="chart third">
+    Scatter chart: duplicate y values
+    <svg></svg>
+  </div>
+  <div id="test15" class="chart third">
+    Scatter chart: duplicate x values
+    <svg></svg>
+  </div>



@ -103,12 +111,32 @@ defaultChartTest("test10", randomData(30,2));
 scatterPlusLineTest("test11", randomDataSloped(2,0));
 scatterPlusLineTest("test12", randomDataSloped(2,10));
 scatterPlusLineTest("test13", randomDataSloped(-0.5,1));
+defaultChartTest("test14", [
+{key: "Duplicate Y",
+     values: [
+        {x: 0, y: 10}, {x:1, y:10},{x:2, y:10},{x:3, y:10}
+     ]
+    }
+]);
+
+defaultChartTest("test15",[
+   {key: "Duplicate X",
+      area: true,
+      values: [
+        {x: 4, y: 10},
+        {x: 4, y: 11},
+        {x: 4, y: 12},
+        {x: 4, y: 13}
+      ]
+    }
+]);

 function defaultChartTest(container, data, margin) {
  nv.addGraph(function() {
    var chart;
    chart = nv.models.scatterChart()
-                  .showDistX(true).showDistY(true);
+                  .showDistX(true).showDistY(true)
+                  ;
    chart.xAxis.tickFormat(d3.format('.02f'));
    chart.yAxis.tickFormat(d3.format('.02f'));
    if (margin) {
--- a/test/lineChartTest.html
+++ b/test/lineChartTest.html
@ -4,13 +4,13 @@
 <link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
 <link href="teststyle.css" rel="stylesheet" type='text/css'>
 <style>
-#chart14 {
+#chart13, #chart14 {
  overflow: scroll;
  width: 500px;
  height: 300px;
 }

-#chart14 svg {
+#chart13 svg, #chart14 svg {
  width: 700px;
  height: 400px;
 }
@ -80,12 +80,23 @@
        <svg></svg>
      </div>

-      <div class='chart third' id='chart14'>
-        Chart in a overflow div with scrolls
+      <div class='chart third' id='chart16'>
+        Duplicate Y coordinate points.
        <svg></svg>
      </div>

      <div class='chart third' id='chart13'>
+        Chart in a overflow div with scrolls (new tooltips)
+        <svg></svg>
+      </div>
+
+      <div class='chart third' id='chart14'>
+        Chart in a overflow div with scrolls (old tooltips)
+        <svg></svg>
+      </div>
+
+      <div style='clear:both;'></div>
+      <div class='chart third' id='chart15'>
        What if there are null, Infinity and NaN values in points?
        <svg></svg>
      </div>
@ -147,9 +158,10 @@ defaultChartConfig("chart9", fibonacci());
 defaultChartConfig("chart10", lotsofSeries());
 defaultChartConfig("chart11", backwards(),false);
 defaultChartConfig("chart12", duplicateX(),false);
-defaultChartConfig("chart13", withNaNs());
-defaultChartConfig("chart14",sinAndCos(), true, false, {width: 700, height: 400});
-
+defaultChartConfig("chart13",hyperbole(), true, false, {width: 700, height: 400});
+defaultChartConfig("chart14",hyperbole(), false, false, {width: 700, height: 400});
+defaultChartConfig("chart15", withNaNs());
+defaultChartConfig("chart16", duplicateY(), false);

 function defaultChartConfig(containerid, data, guideline, useDates, auxOptions) {
  if (auxOptions === undefined) auxOptions = {};
@ -360,6 +372,16 @@ function duplicateX() {
  ];
 }

+function duplicateY() {
+  return [
+    {key: "Duplicate Y",
+     values: [
+        {x: 0, y: 10}, {x:1, y:10},{x:2, y:10},{x:3, y:10}
+     ]
+    }
+  ];
+}
+
 function withNaNs() {
  return [
      {key: "NaN Points",
--- a/test/pieChartTest.html
+++ b/test/pieChartTest.html
@ -60,6 +60,7 @@ text {

 <script src="../lib/d3.v3.js"></script>
 <script src="../nv.d3.js"></script>
+<script src="../src/tooltip.js"></script>
 <script src="../src/models/legend.js"></script>
 <script src="../src/models/pie.js"></script>
 <script src="../src/models/pieChart.js"></script>