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

Added x-axis label rotation to the Axis Model and removed it from discrete bar chart

Browse Source
This commit is contained in:
Eric Rosenberg 2012-07-30 15:26:57 -07:00
parent f4e92d2b68
commit 12d0bf3612
2 changed files with 21 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/models/axis.js
View File

@ -6,6 +6,7 @@ nv.models.axis = function() {
axisLabelText = null,
showMaxMin = true, //TODO: showMaxMin should be disabled on all ordinal scaled axes
highlightZero = true,
rotateLabels = 0,
rotateYLabel = true;
margin = {top: 0, right: 0, bottom: 0, left: 0}
@ -69,16 +70,25 @@ nv.models.axis = function() {
}
break;
case 'bottom':
var xLabelMargin = 30;
var maxTextWidth = 30;
if(rotateLabels){
g.selectAll('g text').each(function(d,i){
if(rotateLabels%360){
var xTicks = g.selectAll('g').select("text");
//Calculate the longest xTick width
xTicks.each(function(d,i){
var width = this.getBBox().width;
if(width > maxTextWidth) maxTextWidth = width;
});
}
//Convert to radians before calculating sin. Add 30 to margin for healthy padding.
var sin = Math.abs(Math.sin(rotateLabels*Math.PI/180));
var xLabelMargin = (sin ? sin*maxTextWidth : maxTextWidth)+30;
//Rotate all xTicks
xTicks.attr('transform', function(d,i,j) { return 'rotate(' + rotateLabels + ' 0,0)' })
.attr('text-anchor', rotateLabels%360 > 0 ? 'start' : 'end');
}
axisLabel.enter().append('text').attr('class', 'nv-axislabel')
.attr('text-anchor', 'middle')
.attr('y', maxTextWidth);
.attr('y', xLabelMargin);
var w = (scale.range().length==2) ? scale.range()[1] : (scale.range()[scale.range().length-1]+(scale.range()[1]-scale.range()[0]));
axisLabel
.attr('x', w/2);
@ -94,7 +104,8 @@ nv.models.axis = function() {
.select('text')
.attr('dy', '.71em')
.attr('y', axis.tickPadding())
.attr('text-anchor', 'middle')
.attr('transform', function(d,i,j) { return 'rotate(' + rotateLabels + ' 0,0)' })
.attr('text-anchor', rotateLabels%360 > 0 ? 'start' : 'end')
.text(function(d,i) {
return ('' + axis.tickFormat()(d)).match('NaN') ? '' : axis.tickFormat()(d)
});
@ -269,6 +280,11 @@ nv.models.axis = function() {
rotateYLabel = _;
return chart;
}
chart.rotateLabels = function(_) {
if(!arguments.length) return rotateLabels;
rotateLabels = _;
return chart;
}
chart.margin = function(_) {
if(!arguments.length) return margin;
margin = _;

18
src/models/discreteBarChart.js
View File

@ -5,7 +5,6 @@ nv.models.discreteBarChart = function() {
height = null,
color = nv.utils.getColor(), //a function that gets color for a datum
staggerLabels = false,
rotateLabels = 0,
tooltips = true,
tooltip = function(key, x, y, e, graph) {
return '<h3>' + x + '</h3>' +
@ -128,17 +127,6 @@ nv.models.discreteBarChart = function() {
.selectAll('text')
.attr('transform', function(d,i,j) { return 'translate(0,' + (j % 2 == 0 ? '0' : '12') + ')' })
if (rotateLabels)
xTicks
.selectAll('text')
.attr('transform', function(d,i,j) { return 'rotate(' + rotateLabels + ' 0,0)' })
.attr('text-anchor', rotateLabels > 0 ? 'start' : 'end')
xTicks
.selectAll('text')
.attr('clip-path', function(d,i,j) { return rotateLabels ? '' : 'url(#nv-x-label-clip-' + discretebar.id() + ')' });
yAxis
.ticks( availableHeight / 36 )
.tickSize( -availableWidth, 0);
@ -208,12 +196,6 @@ nv.models.discreteBarChart = function() {
return chart;
};
chart.rotateLabels = function(_) {
if (!arguments.length) return rotateLabels;
rotateLabels = _;
return chart;
};
chart.tooltips = function(_) {
if (!arguments.length) return tooltips;
tooltips = _;