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

Added barColor fucntionality to multibar to imitate what I did for multibarHorizontal

Browse Source
master-patched
Bob Monteverde 11 years ago
parent 825378124e
commit 11d504c6cd
6 changed files with 94 additions and 9 deletions
Show Stats Download Patch File Download Diff File

3
examples/multiBarChart.html
Unescape Escape View File

@ -66,7 +66,8 @@ var negative_test_data = new d3.range(0,3).map(function(d,i) { return {
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarChart();
chart = nv.models.multiBarChart()
.barColor(d3.scale.category20().range());
chart.xAxis
.showMaxMin(true)

58
nv.d3.js
Unescape Escape View File

@ -5281,6 +5281,8 @@ nv.models.multiBar = function() {
, clipEdge = true
, stacked = false
, color = nv.utils.defaultColor()
, barColor = null // adding the ability to set the color for each rather than the whole group
, disabled // used in conjunction with barColor to communicate from multiBarHorizontalChart what series are disabled
, delay = 1200
, xDomain
, yDomain
@ -5499,6 +5501,18 @@ nv.models.multiBar = function() {
.attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})
.attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',0)'; })
if (barColor) {
if (!disabled) disabled = data.map(function() { return true });
bars
//.style('fill', barColor)
//.style('stroke', barColor)
//.style('fill', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(j).toString(); })
//.style('stroke', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(j).toString(); })
.style('fill', function(d,i,j) { return d3.rgb(barColor(d,i)).darker( disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i] })[j] ).toString(); })
.style('stroke', function(d,i,j) { return d3.rgb(barColor(d,i)).darker( disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i] })[j] ).toString(); });
}
if (stacked)
d3.transition(bars)
.delay(function(d,i) { return i * delay / data[0].values.length })
@ -5635,6 +5649,18 @@ nv.models.multiBar = function() {
return chart;
};
chart.barColor = function(_) {
if (!arguments.length) return barColor;
barColor = nv.utils.getColor(_);
return chart;
};
chart.disabled = function(_) {
if (!arguments.length) return disabled;
disabled = _;
return chart;
};
chart.id = function(_) {
if (!arguments.length) return id;
id = _;
@ -5790,6 +5816,11 @@ nv.models.multiBarChart = function() {
if (showLegend) {
legend.width(availableWidth / 2);
if (multibar.barColor())
data.forEach(function(series,i) {
series.color = d3.rgb('#ccc').darker(i * 1.5).toString();
})
g.select('.nv-legendWrap')
.datum(data)
.call(legend);
@ -5833,6 +5864,7 @@ nv.models.multiBarChart = function() {
// Main Chart Component(s)
multibar
.disabled(data.map(function(series) { return series.disabled }))
.width(availableWidth)
.height(availableHeight)
.color(data.map(function(d,i) {
@ -6002,7 +6034,7 @@ nv.models.multiBarChart = function() {
chart.xAxis = xAxis;
chart.yAxis = yAxis;
d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id', 'stacked', 'delay');
d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id', 'stacked', 'delay', 'barColor');
chart.margin = function(_) {
if (!arguments.length) return margin;
@ -6109,6 +6141,7 @@ nv.models.multiBarHorizontal = function() {
, forceY = [0] // 0 is forced by default.. this makes sense for the majority of bar graphs... user can always do chart.forceY([]) to remove
, color = nv.utils.defaultColor()
, barColor = null // adding the ability to set the color for each rather than the whole group
, disabled // used in conjunction with barColor to communicate from multiBarHorizontalChart what series are disabled
, stacked = false
, showValues = false
, valuePadding = 60
@ -6329,7 +6362,14 @@ nv.models.multiBarHorizontal = function() {
.attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})
if (barColor) {
bars.style('fill', barColor).style('stroke', barColor);
if (!disabled) disabled = data.map(function() { return true });
bars
//.style('fill', barColor)
//.style('stroke', barColor)
//.style('fill', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(j).toString(); })
//.style('stroke', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(j).toString(); })
.style('fill', function(d,i,j) { return d3.rgb(barColor(d,i)).darker( disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i] })[j] ).toString(); })
.style('stroke', function(d,i,j) { return d3.rgb(barColor(d,i)).darker( disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i] })[j] ).toString(); });
}
if (stacked)
@ -6462,6 +6502,12 @@ nv.models.multiBarHorizontal = function() {
return chart;
};
chart.disabled = function(_) {
if (!arguments.length) return disabled;
disabled = _;
return chart;
};
chart.id = function(_) {
if (!arguments.length) return id;
id = _;
@ -6634,6 +6680,11 @@ nv.models.multiBarHorizontalChart = function() {
if (showLegend) {
legend.width(availableWidth / 2);
if (multibar.barColor())
data.forEach(function(series,i) {
series.color = d3.rgb('#ccc').darker(i * 1.5).toString();
})
g.select('.nv-legendWrap')
.datum(data)
.call(legend);
@ -6677,6 +6728,7 @@ nv.models.multiBarHorizontalChart = function() {
// Main Chart Component(s)
multibar
.disabled(data.map(function(series) { return series.disabled }))
.width(availableWidth)
.height(availableHeight)
.color(data.map(function(d,i) {
@ -6829,7 +6881,7 @@ nv.models.multiBarHorizontalChart = function() {
chart.xAxis = xAxis;
chart.yAxis = yAxis;
d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id', 'delay', 'showValues', 'valueFormat', 'stacked');
d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id', 'delay', 'showValues', 'valueFormat', 'stacked', 'barColor');
chart.margin = function(_) {
if (!arguments.length) return margin;

6
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

26
src/models/multiBar.js
Unescape Escape View File

@ -17,6 +17,8 @@ nv.models.multiBar = function() {
, clipEdge = true
, stacked = false
, color = nv.utils.defaultColor()
, barColor = null // adding the ability to set the color for each rather than the whole group
, disabled // used in conjunction with barColor to communicate from multiBarHorizontalChart what series are disabled
, delay = 1200
, xDomain
, yDomain
@ -235,6 +237,18 @@ nv.models.multiBar = function() {
.attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})
.attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',0)'; })
if (barColor) {
if (!disabled) disabled = data.map(function() { return true });
bars
//.style('fill', barColor)
//.style('stroke', barColor)
//.style('fill', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(j).toString(); })
//.style('stroke', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(j).toString(); })
.style('fill', function(d,i,j) { return d3.rgb(barColor(d,i)).darker( disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i] })[j] ).toString(); })
.style('stroke', function(d,i,j) { return d3.rgb(barColor(d,i)).darker( disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i] })[j] ).toString(); });
}
if (stacked)
d3.transition(bars)
.delay(function(d,i) { return i * delay / data[0].values.length })
@ -371,6 +385,18 @@ nv.models.multiBar = function() {
return chart;
};
chart.barColor = function(_) {
if (!arguments.length) return barColor;
barColor = nv.utils.getColor(_);
return chart;
};
chart.disabled = function(_) {
if (!arguments.length) return disabled;
disabled = _;
return chart;
};
chart.id = function(_) {
if (!arguments.length) return id;
id = _;

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

@ -136,6 +136,11 @@ nv.models.multiBarChart = function() {
if (showLegend) {
legend.width(availableWidth / 2);
if (multibar.barColor())
data.forEach(function(series,i) {
series.color = d3.rgb('#ccc').darker(i * 1.5).toString();
})
g.select('.nv-legendWrap')
.datum(data)
.call(legend);
@ -179,6 +184,7 @@ nv.models.multiBarChart = function() {
// Main Chart Component(s)
multibar
.disabled(data.map(function(series) { return series.disabled }))
.width(availableWidth)
.height(availableHeight)
.color(data.map(function(d,i) {
@ -348,7 +354,7 @@ nv.models.multiBarChart = function() {
chart.xAxis = xAxis;
chart.yAxis = yAxis;
d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id', 'stacked', 'delay');
d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id', 'stacked', 'delay', 'barColor');
chart.margin = function(_) {
if (!arguments.length) return margin;

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

@ -137,7 +137,7 @@ nv.models.multiBarHorizontalChart = function() {
if (multibar.barColor())
data.forEach(function(series,i) {
series.color = d3.rgb('#bbb').darker(i * 2).toString();
series.color = d3.rgb('#ccc').darker(i * 1.5).toString();
})
g.select('.nv-legendWrap')

Write Preview
Loading…
Cancel
Save