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

Axes now show Max and Min by default... need to rebind this on all the charts.. will do that soon

Browse Source
master-patched
Bob Monteverde 12 years ago
parent cf0d7bb799
commit b55910786d
4 changed files with 151 additions and 33 deletions
Show Stats Download Patch File Download Diff File

87
nv.d3.js
Unescape Escape View File

@ -266,6 +266,7 @@ nv.models.axis = function() {
//Default Settings
var scale = d3.scale.linear(),
axisLabelText = null,
showMaxMin = true,
highlightZero = true;
//TODO: considering adding margin
@ -276,13 +277,19 @@ nv.models.axis = function() {
function chart(selection) {
selection.each(function(data) {
var container = d3.select(this);
var wrap = container.selectAll('g.wrap.axis').data([data]);
var wrapEnter = wrap.enter().append('g').attr('class', 'wrap axis');
var gEnter = wrapEnter.append('g');
var g = wrap.select('g')
if (axis.orient() == 'top' || axis.orient() == 'bottom')
axis.ticks(Math.abs(scale.range()[1] - scale.range()[0]) / 100);
//TODO: consider calculating height based on whether or not label is added, for reference in charts using this component
//TODO: consider calculating width/height based on whether or not label is added, for reference in charts using this component
var axisLabel = d3.select(this).selectAll('text.axislabel')
var axisLabel = g.selectAll('text.axislabel')
.data([axisLabelText || null]);
axisLabel.exit().remove();
switch (axis.orient()) {
@ -292,40 +299,84 @@ nv.models.axis = function() {
.attr('y', 0);
axisLabel
.attr('x', scale.range()[1] / 2);
break;
case 'right':
axisLabel.enter().append('text').attr('class', 'axislabel')
.attr('transform', 'rotate(90)')
.attr('y', -40); //TODO: consider calculating this based on largest tick width... OR at least expose this on chart
axisLabel
.attr('x', -scale.range()[0] / 2);
break;
break;
case 'bottom':
axisLabel.enter().append('text').attr('class', 'axislabel')
.attr('text-anchor', 'middle')
.attr('y', 25);
axisLabel
.attr('x', scale.range()[1] / 2);
break;
break;
case 'right':
axisLabel.enter().append('text').attr('class', 'axislabel')
.attr('transform', 'rotate(90)')
.attr('y', -40); //TODO: consider calculating this based on largest tick width... OR at least expose this on chart
axisLabel
.attr('x', -scale.range()[0] / 2);
if (showMaxMin) {
var axisMaxMin = wrap.selectAll('g.axisMaxMin')
.data(scale.domain());
axisMaxMin.enter().append('g').attr('class', 'axisMaxMin').append('text');
axisMaxMin.exit().remove();
//container.selectAll('g.axisMaxMin')
axisMaxMin
.attr('transform', function(d,i) {
return 'translate(0,' + scale.range()[i] + ')'
})
.select('text')
.attr('dy', '.32em')
.attr('dx', axis.tickPadding())
.attr('text-anchor', 'start')
.text(function(d,i) {
return axis.tickFormat()(d)
})
}
break;
case 'left':
axisLabel.enter().append('text').attr('class', 'axislabel')
.attr('transform', 'rotate(-90)')
.attr('y', -40); //TODO: consider calculating this based on largest tick width... OR at least expose this on chart
axisLabel
.attr('x', -scale.range()[0] / 2);
break;
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(0,' + scale.range()[i] + ')'
})
.select('text')
.attr('dy', '.32em')
.attr('dx', -axis.tickPadding())
.attr('text-anchor', 'end')
.text(function(d,i) {
return axis.tickFormat()(d)
})
}
break;
}
axisLabel
.text(function(d) { return d });
d3.transition(d3.select(this))
d3.transition(g)
.call(axis);
//check if max and min overlap other values, if so, hide the values that overlap
if (showMaxMin && (axis.orient() === 'left' || axis.orient() === 'right')) {
g.selectAll('g') // the g's wrapping each tick
.filter(function(d,i) {
return scale(d) < 8 || scale(d) > scale.range()[0] - 8; // 8 is assuming text height is 16
})
.remove();
}
//highlight zero line ... Maybe should not be an option and should just be in CSS?
if (highlightZero)
d3.select(this)
.selectAll('line.tick')
g.selectAll('line.tick')
.filter(function(d) { return !parseFloat(Math.round(d*100000)/1000000) }) //this is because sometimes the 0 tick is a very small fraction, TODO: think of cleaner technique
.classed('zero', true);
@ -344,6 +395,12 @@ nv.models.axis = function() {
return chart;
}
chart.showMaxMin = function(_) {
if (!arguments.length) return showMaxMin;
showMaxMin = _;
return chart;
}
chart.highlightZero = function(_) {
if (!arguments.length) return highlightZero;
highlightZero = _;

6
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
src/d3.css
Unescape Escape View File

@ -144,6 +144,10 @@ svg .title {
stroke-opacity: .75;
}
.nvd3 .axis .axisMaxMin text {
font-weight: bold;
}
/**********
* Brush

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

@ -3,6 +3,7 @@ nv.models.axis = function() {
//Default Settings
var scale = d3.scale.linear(),
axisLabelText = null,
showMaxMin = true,
highlightZero = true;
//TODO: considering adding margin
@ -13,13 +14,19 @@ nv.models.axis = function() {
function chart(selection) {
selection.each(function(data) {
var container = d3.select(this);
var wrap = container.selectAll('g.wrap.axis').data([data]);
var wrapEnter = wrap.enter().append('g').attr('class', 'wrap axis');
var gEnter = wrapEnter.append('g');
var g = wrap.select('g')
if (axis.orient() == 'top' || axis.orient() == 'bottom')
axis.ticks(Math.abs(scale.range()[1] - scale.range()[0]) / 100);
//TODO: consider calculating height based on whether or not label is added, for reference in charts using this component
//TODO: consider calculating width/height based on whether or not label is added, for reference in charts using this component
var axisLabel = d3.select(this).selectAll('text.axislabel')
var axisLabel = g.selectAll('text.axislabel')
.data([axisLabelText || null]);
axisLabel.exit().remove();
switch (axis.orient()) {
@ -29,40 +36,84 @@ nv.models.axis = function() {
.attr('y', 0);
axisLabel
.attr('x', scale.range()[1] / 2);
break;
case 'right':
axisLabel.enter().append('text').attr('class', 'axislabel')
.attr('transform', 'rotate(90)')
.attr('y', -40); //TODO: consider calculating this based on largest tick width... OR at least expose this on chart
axisLabel
.attr('x', -scale.range()[0] / 2);
break;
break;
case 'bottom':
axisLabel.enter().append('text').attr('class', 'axislabel')
.attr('text-anchor', 'middle')
.attr('y', 25);
axisLabel
.attr('x', scale.range()[1] / 2);
break;
break;
case 'right':
axisLabel.enter().append('text').attr('class', 'axislabel')
.attr('transform', 'rotate(90)')
.attr('y', -40); //TODO: consider calculating this based on largest tick width... OR at least expose this on chart
axisLabel
.attr('x', -scale.range()[0] / 2);
if (showMaxMin) {
var axisMaxMin = wrap.selectAll('g.axisMaxMin')
.data(scale.domain());
axisMaxMin.enter().append('g').attr('class', 'axisMaxMin').append('text');
axisMaxMin.exit().remove();
//container.selectAll('g.axisMaxMin')
axisMaxMin
.attr('transform', function(d,i) {
return 'translate(0,' + scale.range()[i] + ')'
})
.select('text')
.attr('dy', '.32em')
.attr('dx', axis.tickPadding())
.attr('text-anchor', 'start')
.text(function(d,i) {
return axis.tickFormat()(d)
})
}
break;
case 'left':
axisLabel.enter().append('text').attr('class', 'axislabel')
.attr('transform', 'rotate(-90)')
.attr('y', -40); //TODO: consider calculating this based on largest tick width... OR at least expose this on chart
axisLabel
.attr('x', -scale.range()[0] / 2);
break;
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(0,' + scale.range()[i] + ')'
})
.select('text')
.attr('dy', '.32em')
.attr('dx', -axis.tickPadding())
.attr('text-anchor', 'end')
.text(function(d,i) {
return axis.tickFormat()(d)
})
}
break;
}
axisLabel
.text(function(d) { return d });
d3.transition(d3.select(this))
d3.transition(g)
.call(axis);
//check if max and min overlap other values, if so, hide the values that overlap
if (showMaxMin && (axis.orient() === 'left' || axis.orient() === 'right')) {
g.selectAll('g') // the g's wrapping each tick
.filter(function(d,i) {
return scale(d) < 8 || scale(d) > scale.range()[0] - 8; // 8 is assuming text height is 16
})
.remove();
}
//highlight zero line ... Maybe should not be an option and should just be in CSS?
if (highlightZero)
d3.select(this)
.selectAll('line.tick')
g.selectAll('line.tick')
.filter(function(d) { return !parseFloat(Math.round(d*100000)/1000000) }) //this is because sometimes the 0 tick is a very small fraction, TODO: think of cleaner technique
.classed('zero', true);
@ -81,6 +132,12 @@ nv.models.axis = function() {
return chart;
}
chart.showMaxMin = function(_) {
if (!arguments.length) return showMaxMin;
showMaxMin = _;
return chart;
}
chart.highlightZero = function(_) {
if (!arguments.length) return highlightZero;
highlightZero = _;

Write Preview
Loading…
Cancel
Save