blob42
/
nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added transitioDuration property to stackedAreaChart, lineChart, cumulativeLineChart.

Browse Source
master
Robin Hu 11 years ago
parent 178700c896
commit d57fa841ca
9 changed files with 71 additions and 21 deletions
Show Stats Download Patch File Download Diff File

1
examples/cumulativeLineChart.html
Unescape Escape View File

@ -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

1
examples/lineChart.html
Unescape Escape View File

@ -60,6 +60,7 @@ 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

5
examples/stackedAreaChart.html
Unescape Escape View File

@ -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

36
nv.d3.js
Unescape Escape View File

@ -4947,6 +4947,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
@ -5011,7 +5012,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);
@ -5035,7 +5036,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();
@ -5044,7 +5046,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);
@ -5064,7 +5067,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)
@ -5075,7 +5079,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)
@ -5100,7 +5105,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)
@ -5108,7 +5114,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)
@ -5205,6 +5212,12 @@ nv.models.line = function() {
return chart;
};
chart.transitionDuration = function(_) {
if (!arguments.length) return transitionDuration;
transitionDuration = _;
return chart;
};
//============================================================
@ -5423,7 +5436,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);
}
@ -5433,7 +5447,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);
}
//------------------------------------------------------------
@ -5553,7 +5568,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','transitionDuration');
chart.margin = function(_) {
if (!arguments.length) return margin;

10
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

10
src/models/axis.js
Unescape Escape View File

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

8
src/models/cumulativeLineChart.js
Unescape Escape View File

@ -716,6 +716,14 @@ nv.models.cumulativeLineChart = function() {
return chart;
};
chart.transitionDuration = function(_) {
if (!arguments.length) return lines.transitionDuration();
lines.transitionDuration(_);
xAxis.transitionDuration(_);
yAxis.transitionDuration(_);
return chart;
};
//============================================================

10
src/models/lineChart.js
Unescape Escape View File

@ -344,7 +344,7 @@ nv.models.lineChart = function() {
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','transitionDuration');
, 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'useVoronoi','id', 'interpolate');
chart.margin = function(_) {
if (!arguments.length) return margin;
@ -439,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;
};
//============================================================

11
src/models/stackedAreaChart.js
Unescape Escape View File

@ -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;

Write Preview
Loading…
Cancel
Save