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

Some tweak to the horizontal multi bar, now the staggered delay is option, defaulting to 1200ms divided by the number of x values

Browse Source
master-patched
Bob Monteverde 12 years ago
parent a10101744d
commit 2f155b88c8
4 changed files with 38 additions and 22 deletions
Show Stats Download Patch File Download Diff File

28
nv.d3.js
Unescape Escape View File

@ -3830,6 +3830,7 @@ nv.models.multiBarHorizontal = function() {
showValues = false,
valuePadding = 60,
valueFormat = d3.format(',.2f'),
delay = 1200,
xDomain, yDomain,
x0, y0;
@ -3841,9 +3842,6 @@ nv.models.multiBarHorizontal = function() {
var availableWidth = width - margin.left - margin.right,
availableHeight = height - margin.top - margin.bottom;
//store old scales if they exist
x0 = x0 || x;
y0 = y0 || y;
if (stacked)
data = d3.layout.stack()
@ -3879,6 +3877,10 @@ nv.models.multiBarHorizontal = function() {
if (showValues && !stacked) y.range([(y.domain()[0] < 0 ? valuePadding : 0), availableWidth - (y.domain()[1] > 0 ? valuePadding : 0) ]);
else y.range([0, availableWidth]);
//store old scales if they exist
x0 = x0 || x;
//y0 = y0 || y;
y0 = y0 || d3.scale.linear().domain(y.domain()).range([y(0),y(0)]);
var wrap = d3.select(this).selectAll('g.wrap.multibarHorizontal').data([data]);
var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 multibarHorizontal');
@ -3919,8 +3921,6 @@ nv.models.multiBarHorizontal = function() {
var barsEnter = bars.enter().append('g')
.attr('transform', function(d,i,j) {
//return 'translate(' + (stacked ? 0 : (j * x.rangeBand() / data.length )) + ',' + y0(stacked ? d.y0 : 0) + ')'
//return 'translate(' + y0(stacked ? d.y0 : 0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length )) + ')'
return 'translate(' + y0(stacked ? d.y0 : 0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length ) + x(getX(d,i))) + ')'
})
.on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
@ -3983,7 +3983,7 @@ nv.models.multiBarHorizontal = function() {
.attr('dy', '-.5em')
.text(function(d,i) { return valueFormat(getY(d,i)) })
d3.transition(bars)
.delay(function(d,i) { return i * 1000 / data[0].values.length })
.delay(function(d,i) { return i * delay / data[0].values.length })
.selectAll('text')
.attr('dx', function(d,i) { return getY(d,i) < 0 ? -4 : y(getY(d,i)) - y(0) + 4 })
} else {
@ -3997,7 +3997,7 @@ nv.models.multiBarHorizontal = function() {
//})
if (stacked)
d3.transition(bars)
.delay(function(d,i) { return i * 1000 / data[0].values.length })
.delay(function(d,i) { return i * delay / data[0].values.length })
.attr('transform', function(d,i) {
//return 'translate(' + y(d.y0) + ',0)'
return 'translate(' + y(d.y0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length )) + ')'
@ -4009,7 +4009,7 @@ nv.models.multiBarHorizontal = function() {
.attr('height', x.rangeBand() );
else
d3.transition(bars)
.delay(function(d,i) { return i * 1200 / data[0].values.length })
.delay(function(d,i) { return i * delay / data[0].values.length })
.attr('transform', function(d,i) {
//TODO: stacked must be all positive or all negative, not both?
return 'translate(' +
@ -4160,6 +4160,12 @@ nv.models.multiBarHorizontal = function() {
return chart;
};
chart.delay = function(_) {
if (!arguments.length) return delay;
delay = _;
return chart;
};
chart.showValues = function(_) {
if (!arguments.length) return showValues;
showValues = _;
@ -4308,7 +4314,8 @@ nv.models.multiBarHorizontalChart = function() {
.ticks( availableHeight / 24 )
.tickSize(-availableWidth, 0);
d3.transition(g.select('.x.axis'))
//d3.transition(g.select('.x.axis'))
g.select('.x.axis').transition().duration(0)
.call(xAxis);
var xTicks = g.select('.x.axis').selectAll('g');
@ -4330,6 +4337,7 @@ nv.models.multiBarHorizontalChart = function() {
g.select('.y.axis')
.attr('transform', 'translate(0,' + availableHeight + ')');
d3.transition(g.select('.y.axis'))
//g.select('.y.axis').transition().duration(0)
.call(yAxis);
@ -4397,7 +4405,7 @@ nv.models.multiBarHorizontalChart = function() {
chart.xAxis = xAxis;
chart.yAxis = yAxis;
d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id', 'showValues', 'valueFormat');
d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id', 'delay', 'showValues', 'valueFormat');
chart.margin = function(_) {

4
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

22
src/models/multiBarHorizontal.js
Unescape Escape View File

@ -14,6 +14,7 @@ nv.models.multiBarHorizontal = function() {
showValues = false,
valuePadding = 60,
valueFormat = d3.format(',.2f'),
delay = 1200,
xDomain, yDomain,
x0, y0;
@ -25,9 +26,6 @@ nv.models.multiBarHorizontal = function() {
var availableWidth = width - margin.left - margin.right,
availableHeight = height - margin.top - margin.bottom;
//store old scales if they exist
x0 = x0 || x;
y0 = y0 || y;
if (stacked)
data = d3.layout.stack()
@ -63,6 +61,10 @@ nv.models.multiBarHorizontal = function() {
if (showValues && !stacked) y.range([(y.domain()[0] < 0 ? valuePadding : 0), availableWidth - (y.domain()[1] > 0 ? valuePadding : 0) ]);
else y.range([0, availableWidth]);
//store old scales if they exist
x0 = x0 || x;
//y0 = y0 || y;
y0 = y0 || d3.scale.linear().domain(y.domain()).range([y(0),y(0)]);
var wrap = d3.select(this).selectAll('g.wrap.multibarHorizontal').data([data]);
var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 multibarHorizontal');
@ -103,8 +105,6 @@ nv.models.multiBarHorizontal = function() {
var barsEnter = bars.enter().append('g')
.attr('transform', function(d,i,j) {
//return 'translate(' + (stacked ? 0 : (j * x.rangeBand() / data.length )) + ',' + y0(stacked ? d.y0 : 0) + ')'
//return 'translate(' + y0(stacked ? d.y0 : 0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length )) + ')'
return 'translate(' + y0(stacked ? d.y0 : 0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length ) + x(getX(d,i))) + ')'
})
.on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
@ -167,7 +167,7 @@ nv.models.multiBarHorizontal = function() {
.attr('dy', '-.5em')
.text(function(d,i) { return valueFormat(getY(d,i)) })
d3.transition(bars)
.delay(function(d,i) { return i * 1000 / data[0].values.length })
.delay(function(d,i) { return i * delay / data[0].values.length })
.selectAll('text')
.attr('dx', function(d,i) { return getY(d,i) < 0 ? -4 : y(getY(d,i)) - y(0) + 4 })
} else {
@ -181,7 +181,7 @@ nv.models.multiBarHorizontal = function() {
//})
if (stacked)
d3.transition(bars)
.delay(function(d,i) { return i * 1000 / data[0].values.length })
.delay(function(d,i) { return i * delay / data[0].values.length })
.attr('transform', function(d,i) {
//return 'translate(' + y(d.y0) + ',0)'
return 'translate(' + y(d.y0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length )) + ')'
@ -193,7 +193,7 @@ nv.models.multiBarHorizontal = function() {
.attr('height', x.rangeBand() );
else
d3.transition(bars)
.delay(function(d,i) { return i * 1200 / data[0].values.length })
.delay(function(d,i) { return i * delay / data[0].values.length })
.attr('transform', function(d,i) {
//TODO: stacked must be all positive or all negative, not both?
return 'translate(' +
@ -344,6 +344,12 @@ nv.models.multiBarHorizontal = function() {
return chart;
};
chart.delay = function(_) {
if (!arguments.length) return delay;
delay = _;
return chart;
};
chart.showValues = function(_) {
if (!arguments.length) return showValues;
showValues = _;

6
src/models/multiBarHorizontalChart.js
Unescape Escape View File

@ -125,7 +125,8 @@ nv.models.multiBarHorizontalChart = function() {
.ticks( availableHeight / 24 )
.tickSize(-availableWidth, 0);
d3.transition(g.select('.x.axis'))
//d3.transition(g.select('.x.axis'))
g.select('.x.axis').transition().duration(0)
.call(xAxis);
var xTicks = g.select('.x.axis').selectAll('g');
@ -147,6 +148,7 @@ nv.models.multiBarHorizontalChart = function() {
g.select('.y.axis')
.attr('transform', 'translate(0,' + availableHeight + ')');
d3.transition(g.select('.y.axis'))
//g.select('.y.axis').transition().duration(0)
.call(yAxis);
@ -214,7 +216,7 @@ nv.models.multiBarHorizontalChart = function() {
chart.xAxis = xAxis;
chart.yAxis = yAxis;
d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id', 'showValues', 'valueFormat');
d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id', 'delay', 'showValues', 'valueFormat');
chart.margin = function(_) {

Write Preview
Loading…
Cancel
Save