Transformation of Axis

30 views
Skip to first unread message

poswald

unread,
Nov 25, 2011, 3:34:20 AM11/25/11
to d3-js
I have a stacked bar graph visualization that is drawn into a layer
that has been flipped so the origin is in the bottom left. I was going
to try using the d3.svg.axis object with it but I can't figure out how
it would be possible.

In coffeescript:

y = d3.scale.linear().range([0, h])
yAxis = d3.svg.axis().scale(y).ticks(4).orient("left")
y.domain([0, 300])

svg = d3.select("#chart").append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate( #{m[3]}, #{m[0]}) translate(0,
#{h}) scale(1,-1)") # shift inward, offset, and flip

svg.append("svg:g")
.attr("class", "y axis")
.call(yAxis);

This works well except the text labels come out flipped over. I might
be able to re-orient them by putting them in a different layer but I
worry about what would happen if I switched to a log scale. Does
anyone have a good way of dealing with this or am I going about this
all wrong?

Mike Bostock

unread,
Nov 25, 2011, 12:06:52 PM11/25/11
to d3...@googlegroups.com
It's possible to select the text elements that are created by the axis
and flip them again, but generally I find it easier to invert the the
y scale's range (as [h, 0] instead of [0, h]), rather than using a
scale(-1) transform.

Mike

Reply all
Reply to author
Forward
0 new messages