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; + }; + //============================================================