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

Stage 1 of cleanup continued

Browse Source
This commit is contained in:
Bob Monteverde 2012-07-09 22:57:12 -04:00
parent ab80bda59c
commit c6e4ffb5c5
5 changed files with 431 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

544
nv.d3.js
View File

File diff suppressed because it is too large Load Diff

8
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

49
src/models/discreteBar.js
View File

@ -1,5 +1,10 @@
nv.models.discreteBar = function() {
//============================================================
// Public Variables with Default Settings
//------------------------------------------------------------
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = 960,
height = 500,
@ -12,20 +17,23 @@ nv.models.discreteBar = function() {
color = d3.scale.category20().range(),
showValues = false,
valueFormat = d3.format(',.2f'),
xDomain, yDomain,
xDomain, yDomain;
//============================================================
// Private Variables
//------------------------------------------------------------
var dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout'),
x0, y0;
var dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout');
//TODO: remove all the code taht deals with multiple series
function chart(selection) {
selection.each(function(data) {
var availableWidth = width - margin.left - margin.right,
availableHeight = height - margin.top - margin.bottom;
//add series index to each data point for reference
data = data.map(function(series, i) {
series.values = series.values.map(function(point) {
@ -37,7 +45,7 @@ nv.models.discreteBar = function() {
var seriesData = (xDomain && yDomain) ? [] : // if we know xDomain and yDomain, no need to calculate
data.map(function(d) {
data.map(function(d) {
return d.values.map(function(d,i) {
return { x: getX(d,i), y: getY(d,i), y0: d.y0 }
})
@ -46,16 +54,17 @@ nv.models.discreteBar = function() {
x .domain(xDomain || d3.merge(seriesData).map(function(d) { return d.x }))
.rangeBands([0, availableWidth], .1);
y .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.y }).concat(forceY)))
//.range([availableHeight, 0]);
y .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.y }).concat(forceY)));
// If showValues, pad the Y axis range to account for label height
if (showValues) y.range([availableHeight - (y.domain()[0] < 0 ? 12 : 0), y.domain()[1] > 0 ? 12 : 0]);
else y.range([availableHeight, 0]);
//store old scales if they exist
x0 = x0 || x; //TODO: decide whether or not to keep
y0 = y0 || d3.scale.linear().domain(y.domain()).range([y(0),y(0)]);
x0 = x0 || x;
y0 = y0 || y.copy().range([y(0),y(0)]);
var wrap = d3.select(this).selectAll('g.wrap.discretebar').data([data]);
var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 discretebar');
@ -68,21 +77,19 @@ nv.models.discreteBar = function() {
//TODO: by definiteion, the discrete bar should not have multiple groups, will modify/remove later
//TODO: by definition, the discrete bar should not have multiple groups, will modify/remove later
var groups = wrap.select('.groups').selectAll('.group')
.data(function(d) { return d }, function(d) { return d.key });
groups.enter().append('g')
.style('stroke-opacity', 1e-6)
.style('fill-opacity', 1e-6)
.style('fill-opacity', 1e-6);
d3.transition(groups.exit())
.style('stroke-opacity', 1e-6)
.style('fill-opacity', 1e-6)
.remove();
groups
.attr('class', function(d,i) { return 'group series-' + i })
.classed('hover', function(d) { return d.hover })
.classed('hover', function(d) { return d.hover });
d3.transition(groups)
.style('stroke-opacity', 1)
.style('fill-opacity', .75);
@ -150,7 +157,7 @@ nv.models.discreteBar = function() {
.attr('height', 0)
.attr('width', x.rangeBand() / data.length )
.style('fill', function(d,i){ return d.color || color[i % color.length] }) //this is a 'hack' to allow multiple colors in a single series... will need to rethink this methodology
.style('stroke', function(d,i){ return d.color || color[i % color.length] })
.style('stroke', function(d,i){ return d.color || color[i % color.length] });
if (showValues) {
barsEnter.append('text')
@ -158,7 +165,7 @@ nv.models.discreteBar = function() {
bars.selectAll('text')
.attr('x', x.rangeBand() / 2)
.attr('y', function(d,i) { return getY(d,i) < 0 ? y(getY(d,i)) - y(0) + 12 : -4 })
.text(function(d,i) { return valueFormat(getY(d,i)) })
.text(function(d,i) { return valueFormat(getY(d,i)) });
} else {
bars.selectAll('text').remove();
}
@ -170,25 +177,21 @@ nv.models.discreteBar = function() {
return 'translate(' + x(getX(d,i)) + ', ' + (getY(d,i) < 0 ? y0(0) : y0(getY(d,i))) + ')'
})
.selectAll('rect')
.attr('width', x.rangeBand() / data.length)
.attr('width', x.rangeBand() / data.length);
d3.transition(bars)
//.delay(function(d,i) { return i * 1200 / data[0].values.length })
.attr('transform', function(d,i) {
return 'translate(' + x(getX(d,i)) + ', ' + (getY(d,i) < 0 ? y(0) : y(getY(d,i))) + ')'
})
.selectAll('rect')
//.attr('width', x.rangeBand() / data.length)
.attr('height', function(d,i) {
return Math.abs(y(getY(d,i)) - y(0))
});
//TODO: decide if this makes sense to add into all the models for ease of updating (updating without needing the selection)
chart.update = function() {
selection.transition().call(chart);
}
chart.update = function() { chart(selection) };
//store old scales for use in transitions on update, to animate from old to new positions, and sizes
x0 = x.copy();

36
src/models/multiBar.js
View File

@ -1,8 +1,15 @@
nv.models.multiBar = function() {
//============================================================
// Public Variables with Default Settings
//------------------------------------------------------------
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = 960,
height = 500,
x = d3.scale.ordinal(),
y = d3.scale.linear(),
id = Math.floor(Math.random() * 10000), //Create semi-unique ID in case user doesn't select one
getX = function(d) { return d.x },
getY = function(d) { return d.y },
@ -11,13 +18,16 @@ nv.models.multiBar = function() {
stacked = false,
color = d3.scale.category20().range(),
delay = 1200,
xDomain, yDomain,
x0, y0;
xDomain, yDomain;
//============================================================
// Private Variables
//------------------------------------------------------------
//var x = d3.scale.linear(),
var x = d3.scale.ordinal(),
y = d3.scale.linear(),
dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout');
var dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout'),
x0, y0;
function chart(selection) {
@ -213,11 +223,9 @@ nv.models.multiBar = function() {
//TODO: decide if this makes sense to add into all the models for ease of updating (updating without needing the selection)
chart.update = function() {
selection.transition().call(chart);
}
chart.update = function() { chart(selection) };
//store old scales for use in transitions on update, to animate from old to new positions, and sizes
//store old scales for use in transitions on update
x0 = x.copy();
y0 = y.copy();
@ -227,6 +235,10 @@ nv.models.multiBar = function() {
}
//============================================================
// Global getters and setters
//------------------------------------------------------------
chart.dispatch = dispatch;
chart.x = function(_) {
@ -308,9 +320,9 @@ nv.models.multiBar = function() {
};
chart.id = function(_) {
if (!arguments.length) return id;
id = _;
return chart;
if (!arguments.length) return id;
id = _;
return chart;
};
chart.delay = function(_) {

87
src/models/multiBarChart.js
View File

@ -1,5 +1,10 @@
nv.models.multiBarChart = function() {
//============================================================
// Public Variables with Default Settings
//------------------------------------------------------------
var margin = {top: 30, right: 20, bottom: 50, left: 60},
width = null,
height = null,
@ -10,13 +15,17 @@ nv.models.multiBarChart = function() {
tooltip = function(key, x, y, e, graph) {
return '<h3>' + key + '</h3>' +
'<p>' + y + ' on ' + x + '</p>'
};
},
x, y; //can be accessed via chart.multibar.[x/y]Scale()
//============================================================
// Private Variables
//------------------------------------------------------------
var multibar = nv.models.multiBar().stacked(false),
x = multibar.xScale(),
y = multibar.yScale(),
xAxis = nv.models.axis().scale(x).orient('bottom').highlightZero(false), //.showMaxMin(false), //TODO: see why showMaxMin(false) causes no ticks to be shown on x axis
yAxis = nv.models.axis().scale(y).orient('left'),
xAxis = nv.models.axis().orient('bottom').highlightZero(false), //.showMaxMin(false), //TODO: see why showMaxMin(false) causes no ticks to be shown on x axis
yAxis = nv.models.axis().orient('left'),
legend = nv.models.legend().height(30),
controls = nv.models.legend().height(30),
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
@ -49,36 +58,10 @@ nv.models.multiBarChart = function() {
- margin.left - margin.right,
availableHeight = (height || parseInt(container.style('height')) || 400)
- margin.top - margin.bottom;
/*
var seriesData;
if (multibar.stacked()) {
seriesData = data.filter(function(d) { return !d.disabled })
.reduce(function(prev, curr, index) { //sum up all the y's
curr.values.forEach(function(d,i) {
if (!index) prev[i] = {x: multibar.x()(d,i), y:0};
prev[i].y += multibar.y()(d,i);
});
return prev;
}, []);
} else {
seriesData = data.filter(function(d) { return !d.disabled })
.map(function(d) {
return d.values.map(function(d,i) {
return { x: multibar.x()(d,i), y: multibar.y()(d,i) }
})
});
}
//x .domain(d3.extent(d3.merge(seriesData).map(function(d) { return d.x }).concat(multibar.forceX) ))
//.range([0, availableWidth]);
x .domain(d3.merge(seriesData).map(function(d) { return d.x }))
.rangeBands([0, availableWidth], .1);
y .domain(d3.extent(d3.merge(seriesData).map(function(d) { return d.y }).concat(multibar.forceY) ))
.range([availableHeight, 0]);
*/
x = multibar.xScale();
y = multibar.yScale();
var wrap = container.selectAll('g.wrap.multiBarWithLegend').data([data]);
@ -142,6 +125,7 @@ nv.models.multiBarChart = function() {
xAxis
.scale(x)
.ticks( availableWidth / 100 )
.tickSize(-availableHeight, 0);
@ -165,6 +149,7 @@ nv.models.multiBarChart = function() {
.style('opacity', 0) //TODO: figure out why even tho the filter does work, all ticks are disappearing
yAxis
.scale(y)
.ticks( availableHeight / 36 )
.tickSize( -availableWidth, 0);
@ -173,6 +158,9 @@ nv.models.multiBarChart = function() {
//============================================================
// Event Handling/Dispatching (in chart's scope)
//------------------------------------------------------------
legend.dispatch.on('legendClick', function(d,i) {
d.disabled = !d.disabled;
@ -208,17 +196,9 @@ nv.models.multiBarChart = function() {
selection.transition().call(chart);
});
multibar.dispatch.on('elementMouseover.tooltip2', function(e) {
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
dispatch.tooltipShow(e);
dispatch.on('tooltipShow', function(e) {
if (tooltips) showTooltip(e, that.parentNode)
});
if (tooltips) dispatch.on('tooltipShow', function(e) { showTooltip(e, that.parentNode) } ); // TODO: maybe merge with above?
multibar.dispatch.on('elementMouseout.tooltip', function(e) {
dispatch.tooltipHide(e);
});
if (tooltips) dispatch.on('tooltipHide', nv.tooltip.cleanup);
chart.update = function() { selection.transition().call(chart) };
@ -230,6 +210,27 @@ nv.models.multiBarChart = function() {
}
//============================================================
// Event Handling/Dispatching (out of chart's scope)
//------------------------------------------------------------
multibar.dispatch.on('elementMouseover.tooltip2', function(e) {
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
dispatch.tooltipShow(e);
});
multibar.dispatch.on('elementMouseout.tooltip', function(e) {
dispatch.tooltipHide(e);
});
dispatch.on('tooltipHide', function() {
if (tooltips) nv.tooltip.cleanup();
});
//============================================================
// Global getters and setters
//------------------------------------------------------------
chart.dispatch = dispatch;
chart.legend = legend;
chart.xAxis = xAxis;