From 8c0b4afb649e7847ec1f09844a80ea421281dbb3 Mon Sep 17 00:00:00 2001 From: Djordje Ungar Date: Tue, 19 Nov 2013 12:55:38 +0100 Subject: [PATCH] Add ability to rotate labels --- src/js/Rickshaw.Graph.Axis.X.js | 9 ++++++++- src/js/Rickshaw.Graph.Axis.Y.js | 9 ++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/js/Rickshaw.Graph.Axis.X.js b/src/js/Rickshaw.Graph.Axis.X.js index 99dc9392..1ace32d3 100644 --- a/src/js/Rickshaw.Graph.Axis.X.js +++ b/src/js/Rickshaw.Graph.Axis.X.js @@ -16,6 +16,9 @@ Rickshaw.Graph.Axis.X = function(args) { this.tickSize = args.tickSize || 4; this.ticksTreatment = args.ticksTreatment || 'plain'; + this.tickRotation = args.tickRotation || 0; + this.tickOffsetX = args.tickOffsetX || 0; + this.tickOffsetY = args.tickOffsetY || 0; if (args.element) { @@ -79,11 +82,15 @@ Rickshaw.Graph.Axis.X = function(args) { this.vis.selectAll('*').remove(); } + var relative_transform = "rotate("+this.tickRotation+") translate("+this.tickOffsetX+","+this.tickOffsetY+")"; this.vis .append("svg:g") .attr("class", ["x_ticks_d3", this.ticksTreatment].join(" ")) .attr("transform", transform) - .call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize)); + .call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize)) + .selectAll("text") + .style("text-anchor", "end") + .attr("transform", relative_transform); var gridSize = (this.orientation == 'bottom' ? 1 : -1) * this.graph.height; diff --git a/src/js/Rickshaw.Graph.Axis.Y.js b/src/js/Rickshaw.Graph.Axis.Y.js index 6436e28c..b073302c 100644 --- a/src/js/Rickshaw.Graph.Axis.Y.js +++ b/src/js/Rickshaw.Graph.Axis.Y.js @@ -15,6 +15,9 @@ Rickshaw.Graph.Axis.Y = Rickshaw.Class.create( { this.ticksTreatment = args.ticksTreatment || 'plain'; this.tickFormat = args.tickFormat || function(y) { return y }; + this.tickRotation = args.tickRotation || 0; + this.tickOffsetX = args.tickOffsetX || 0; + this.tickOffsetY = args.tickOffsetY || 0; this.berthRate = 0.10; @@ -95,11 +98,15 @@ Rickshaw.Graph.Axis.Y = Rickshaw.Class.create( { this.vis.selectAll('*').remove(); } + var relative_transform = "rotate("+this.tickRotation+") translate("+this.tickOffsetX+","+this.tickOffsetY+")"; this.vis .append("svg:g") .attr("class", ["y_ticks", this.ticksTreatment].join(" ")) .attr("transform", transform) - .call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize)); + .call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize)) + .selectAll("text") + .style("text-anchor", "end") + .attr("transform", relative_transform); return axis; },