d3 axis orientation: center

Question

in D3, how can I put an axis in the middle, or center, of a graph? The documentation says "only top/bottom/left/right".

I know the dimensions of my graph, let's say it is 400px by 400px. In Protovis I used

vis.add(pv.Rule).bottom(200)

placing an axis 200px up from the bottom. How can I do this in D3?

Answer 1

You can transform the axes whichever way you want. The orientation only refers to which side the ticks and numbers are placed on.

See e.g. http://alignedleft.com/tutorials/d3/axes/

svg.append("g")
 .attr("class", "axis")
 .attr("transform", "translate(0," + (h - padding) + ")")
 .call(xAxis);

where you just need to change the parameter to the transform to get whatever you want.