diff --git a/examples/scatterChart.html b/examples/scatterChart.html
index d8055b2..3806bb1 100644
--- 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);
diff --git a/examples/scatterPlusLineChart.html b/examples/scatterPlusLineChart.html
index 512df46..580dd64 100644
--- 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);
diff --git a/src/models/distribution.js b/src/models/distribution.js
index 72fa8d2..37b071b 100644
--- a/src/models/distribution.js
+++ b/src/models/distribution.js
@@ -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;
+ };
+
//============================================================
diff --git a/src/models/scatter.js b/src/models/scatter.js
index 4af7fdf..78877d5 100644
--- a/src/models/scatter.js
+++ b/src/models/scatter.js
@@ -38,6 +38,7 @@ nv.models.scatter = function() {
, singlePoint = false
, dispatch = d3.dispatch('elementClick', 'elementMouseover', 'elementMouseout')
, useVoronoi = true
+ , transitionDuration = 250
;
//============================================================
@@ -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;
+ };
+
//============================================================
diff --git a/src/models/scatterChart.js b/src/models/scatterChart.js
index 37d17b8..46e71f8 100644
--- a/src/models/scatterChart.js
+++ b/src/models/scatterChart.js
@@ -608,6 +608,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;
+ };
+
//============================================================
diff --git a/src/models/scatterPlusLineChart.js b/src/models/scatterPlusLineChart.js
index f87da53..ad53822 100644
--- a/src/models/scatterPlusLineChart.js
+++ b/src/models/scatterPlusLineChart.js
@@ -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;
+ };
+
//============================================================