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

Added Max/Min to horizontal axes, on by default, but can be disabled with showMaxMin(false) on the axis component

Browse Source
master-patched
Bob Monteverde 12 years ago
parent 755af6e9d4
commit c494172fe2
11 changed files with 139 additions and 22 deletions
Show Stats Download Patch File Download Diff File

2
examples/stackedAreaChart.html
Unescape Escape View File

@ -35,7 +35,7 @@ text {
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/scatter.js"></script>
<script src="../src/models/stackedArea2.js"></script>
<script src="../src/models/stackedArea.js"></script>
<script src="../src/models/stackedAreaChart.js"></script>
<script>

76
nv.d3.js
Unescape Escape View File

@ -306,6 +306,27 @@ nv.models.axis = function() {
.attr('y', 0);
axisLabel
.attr('x', scale.range()[1] / 2);
if (showMaxMin) {
var axisMaxMin = wrap.selectAll('g.axisMaxMin')
.data(scale.domain());
axisMaxMin.enter().append('g').attr('class', 'axisMaxMin').append('text');
axisMaxMin.exit().remove();
axisMaxMin
.attr('transform', function(d,i) {
return 'translate(' + scale(d) + ',0)'
})
.select('text')
.attr('dy', '0em')
.attr('y', -axis.tickPadding())
.attr('text-anchor', 'middle')
.text(function(d,i) {
return axis.tickFormat()(d)
});
d3.transition(axisMaxMin)
.attr('transform', function(d,i) {
return 'translate(' + scale.range()[i] + ',0)'
});
}
break;
case 'bottom':
axisLabel.enter().append('text').attr('class', 'axislabel')
@ -313,6 +334,27 @@ nv.models.axis = function() {
.attr('y', 25);
axisLabel
.attr('x', scale.range()[1] / 2);
if (showMaxMin) {
var axisMaxMin = wrap.selectAll('g.axisMaxMin')
.data(scale.domain());
axisMaxMin.enter().append('g').attr('class', 'axisMaxMin').append('text');
axisMaxMin.exit().remove();
axisMaxMin
.attr('transform', function(d,i) {
return 'translate(' + scale(d) + ',0)'
})
.select('text')
.attr('dy', '.71em')
.attr('y', axis.tickPadding())
.attr('text-anchor', 'middle')
.text(function(d,i) {
return axis.tickFormat()(d)
});
d3.transition(axisMaxMin)
.attr('transform', function(d,i) {
return 'translate(' + scale.range()[i] + ',0)'
});
}
break;
case 'right':
axisLabel.enter().append('text').attr('class', 'axislabel')
@ -390,6 +432,22 @@ nv.models.axis = function() {
.remove();
}
if (showMaxMin && (axis.orient() === 'top' || axis.orient() === 'bottom')) {
var maxMinRange = [];
wrap.selectAll('g.axisMaxMin')
.each(function(d,i) {
if (i) // i== 1, max position
maxMinRange.push(scale(d) - this.getBBox().width - 4) //assuming the max and min labels are as wide as the next tick (with an extra 4 pixels just in case)
else // i==0, min position
maxMinRange.push(scale(d) + this.getBBox().width + 4)
});
g.selectAll('g') // the g's wrapping each tick
.filter(function(d,i) {
return scale(d) < maxMinRange[0] || scale(d) > maxMinRange[1];
})
.remove();
}
//highlight zero line ... Maybe should not be an option and should just be in CSS?
if (highlightZero)
@ -1327,7 +1385,7 @@ nv.models.cumulativeLineChart = function() {
y = lines.yScale(),
dx = d3.scale.linear(),
id = lines.id(),
xAxis = nv.models.axis().scale(x).orient('bottom'),
xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
yAxis = nv.models.axis().scale(y).orient('left'),
legend = nv.models.legend().height(30),
controls = nv.models.legend().height(30),
@ -1942,7 +2000,7 @@ nv.models.discreteBarChart = function() {
var discretebar = nv.models.discreteBar(),
x = discretebar.xScale(),
y = discretebar.yScale(),
xAxis = nv.models.axis().scale(x).orient('bottom').highlightZero(false),
xAxis = nv.models.axis().scale(x).orient('bottom').highlightZero(false).showMaxMin(false),
yAxis = nv.models.axis().scale(y).orient('left'),
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
@ -2907,7 +2965,7 @@ nv.models.lineChart = function() {
var lines = nv.models.line(),
x = lines.xScale(),
y = lines.yScale(),
xAxis = nv.models.axis().scale(x).orient('bottom'),
xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
yAxis = nv.models.axis().scale(y).orient('left'),
legend = nv.models.legend().height(30),
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
@ -3133,7 +3191,7 @@ nv.models.linePlusBarChart = function() {
x = d3.scale.linear(), // needs to be both line and historicalBar x Axis
y1 = bars.yScale(),
y2 = lines.yScale(),
xAxis = nv.models.axis().scale(x).orient('bottom'),
xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
yAxis1 = nv.models.axis().scale(y1).orient('left'),
yAxis2 = nv.models.axis().scale(y2).orient('right'),
legend = nv.models.legend().height(30),
@ -3440,9 +3498,9 @@ nv.models.lineWithFocusChart = function() {
y = lines.yScale(),
x2 = lines2.xScale(),
y2 = lines2.yScale(),
xAxis = nv.models.axis().scale(x).orient('bottom'),
xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
yAxis = nv.models.axis().scale(y).orient('left'),
x2Axis = nv.models.axis().scale(x2).orient('bottom'),
x2Axis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
y2Axis = nv.models.axis().scale(y2).orient('left'),
legend = nv.models.legend().height(30),
dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
@ -4098,7 +4156,7 @@ nv.models.multiBarChart = function() {
var multibar = nv.models.multiBar().stacked(false),
x = multibar.xScale(),
y = multibar.yScale(),
xAxis = nv.models.axis().scale(x).orient('bottom').highlightZero(false),
xAxis = nv.models.axis().scale(x).orient('bottom').highlightZero(false), //TODO: see why showMaxMin(false) causes no ticks to be shown on x axis
yAxis = nv.models.axis().scale(y).orient('left'),
legend = nv.models.legend().height(30),
controls = nv.models.legend().height(30),
@ -6643,7 +6701,7 @@ nv.models.stackedArea = function() {
}
nv.models.stackedAreaChart = function() {
var margin = {top: 30, right: 20, bottom: 50, left: 60},
var margin = {top: 30, right: 25, bottom: 50, left: 60},
width = null,
height = null,
color = d3.scale.category20().range(),
@ -6659,7 +6717,7 @@ nv.models.stackedAreaChart = function() {
var stacked = nv.models.stackedArea(),
x = stacked.xScale(),
y = stacked.yScale(),
xAxis = nv.models.axis().scale(x).orient('bottom'),
xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
yAxis = nv.models.axis().scale(y).orient('left'),
legend = nv.models.legend().height(30),
controls = nv.models.legend().height(30),

7
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

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

@ -43,6 +43,27 @@ nv.models.axis = function() {
.attr('y', 0);
axisLabel
.attr('x', scale.range()[1] / 2);
if (showMaxMin) {
var axisMaxMin = wrap.selectAll('g.axisMaxMin')
.data(scale.domain());
axisMaxMin.enter().append('g').attr('class', 'axisMaxMin').append('text');
axisMaxMin.exit().remove();
axisMaxMin
.attr('transform', function(d,i) {
return 'translate(' + scale(d) + ',0)'
})
.select('text')
.attr('dy', '0em')
.attr('y', -axis.tickPadding())
.attr('text-anchor', 'middle')
.text(function(d,i) {
return axis.tickFormat()(d)
});
d3.transition(axisMaxMin)
.attr('transform', function(d,i) {
return 'translate(' + scale.range()[i] + ',0)'
});
}
break;
case 'bottom':
axisLabel.enter().append('text').attr('class', 'axislabel')
@ -50,6 +71,27 @@ nv.models.axis = function() {
.attr('y', 25);
axisLabel
.attr('x', scale.range()[1] / 2);
if (showMaxMin) {
var axisMaxMin = wrap.selectAll('g.axisMaxMin')
.data(scale.domain());
axisMaxMin.enter().append('g').attr('class', 'axisMaxMin').append('text');
axisMaxMin.exit().remove();
axisMaxMin
.attr('transform', function(d,i) {
return 'translate(' + scale(d) + ',0)'
})
.select('text')
.attr('dy', '.71em')
.attr('y', axis.tickPadding())
.attr('text-anchor', 'middle')
.text(function(d,i) {
return axis.tickFormat()(d)
});
d3.transition(axisMaxMin)
.attr('transform', function(d,i) {
return 'translate(' + scale.range()[i] + ',0)'
});
}
break;
case 'right':
axisLabel.enter().append('text').attr('class', 'axislabel')
@ -127,6 +169,22 @@ nv.models.axis = function() {
.remove();
}
if (showMaxMin && (axis.orient() === 'top' || axis.orient() === 'bottom')) {
var maxMinRange = [];
wrap.selectAll('g.axisMaxMin')
.each(function(d,i) {
if (i) // i== 1, max position
maxMinRange.push(scale(d) - this.getBBox().width - 4) //assuming the max and min labels are as wide as the next tick (with an extra 4 pixels just in case)
else // i==0, min position
maxMinRange.push(scale(d) + this.getBBox().width + 4)
});
g.selectAll('g') // the g's wrapping each tick
.filter(function(d,i) {
return scale(d) < maxMinRange[0] || scale(d) > maxMinRange[1];
})
.remove();
}
//highlight zero line ... Maybe should not be an option and should just be in CSS?
if (highlightZero)

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

@ -18,7 +18,7 @@ nv.models.cumulativeLineChart = function() {
y = lines.yScale(),
dx = d3.scale.linear(),
id = lines.id(),
xAxis = nv.models.axis().scale(x).orient('bottom'),
xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
yAxis = nv.models.axis().scale(y).orient('left'),
legend = nv.models.legend().height(30),
controls = nv.models.legend().height(30),

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

@ -15,7 +15,7 @@ nv.models.discreteBarChart = function() {
var discretebar = nv.models.discreteBar(),
x = discretebar.xScale(),
y = discretebar.yScale(),
xAxis = nv.models.axis().scale(x).orient('bottom').highlightZero(false),
xAxis = nv.models.axis().scale(x).orient('bottom').highlightZero(false).showMaxMin(false),
yAxis = nv.models.axis().scale(y).orient('left'),
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');

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

@ -14,7 +14,7 @@ nv.models.lineChart = function() {
var lines = nv.models.line(),
x = lines.xScale(),
y = lines.yScale(),
xAxis = nv.models.axis().scale(x).orient('bottom'),
xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
yAxis = nv.models.axis().scale(y).orient('left'),
legend = nv.models.legend().height(30),
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');

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

@ -19,7 +19,7 @@ nv.models.linePlusBarChart = function() {
x = d3.scale.linear(), // needs to be both line and historicalBar x Axis
y1 = bars.yScale(),
y2 = lines.yScale(),
xAxis = nv.models.axis().scale(x).orient('bottom'),
xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
yAxis1 = nv.models.axis().scale(y1).orient('left'),
yAxis2 = nv.models.axis().scale(y2).orient('right'),
legend = nv.models.legend().height(30),

4
src/models/lineWithFocusChart.js
Unescape Escape View File

@ -19,9 +19,9 @@ nv.models.lineWithFocusChart = function() {
y = lines.yScale(),
x2 = lines2.xScale(),
y2 = lines2.yScale(),
xAxis = nv.models.axis().scale(x).orient('bottom'),
xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
yAxis = nv.models.axis().scale(y).orient('left'),
x2Axis = nv.models.axis().scale(x2).orient('bottom'),
x2Axis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
y2Axis = nv.models.axis().scale(y2).orient('left'),
legend = nv.models.legend().height(30),
dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),

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

@ -15,7 +15,7 @@ nv.models.multiBarChart = function() {
var multibar = nv.models.multiBar().stacked(false),
x = multibar.xScale(),
y = multibar.yScale(),
xAxis = nv.models.axis().scale(x).orient('bottom').highlightZero(false),
xAxis = nv.models.axis().scale(x).orient('bottom').highlightZero(false), //TODO: see why showMaxMin(false) causes no ticks to be shown on x axis
yAxis = nv.models.axis().scale(y).orient('left'),
legend = nv.models.legend().height(30),
controls = nv.models.legend().height(30),

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

@ -1,6 +1,6 @@
nv.models.stackedAreaChart = function() {
var margin = {top: 30, right: 20, bottom: 50, left: 60},
var margin = {top: 30, right: 25, bottom: 50, left: 60},
width = null,
height = null,
color = d3.scale.category20().range(),
@ -16,7 +16,7 @@ nv.models.stackedAreaChart = function() {
var stacked = nv.models.stackedArea(),
x = stacked.xScale(),
y = stacked.yScale(),
xAxis = nv.models.axis().scale(x).orient('bottom'),
xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
yAxis = nv.models.axis().scale(y).orient('left'),
legend = nv.models.legend().height(30),
controls = nv.models.legend().height(30),

Write Preview
Loading…
Cancel
Save