d3.js - swap x and y axis using axis objects

Question

I'm using d3.js and I've got a fully functioning bar graph, except for one thing. I want to be able to swap the x and y axis. This example most closely aligns with what I'm currently working with.

Using that example, I want to have the bars go from left to right, the frequency on the bottom, and the letters on the left. Is there an easy trick to do this with the axis objects, or something similar?

Answer 1

I ended up having to just rewrite the class from scratch. It wasn't ideal, but it's better than having every other line be an if statement.

Answer 2

You can just switch the orientation or those

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis() .scale(y) .orient("left") .tickFormat(formatPercent);

so here you should give bottom orientation to Y axis and left to x Axis data.

Answer 3

将图表类型更改为horizontalBar