in D3, how can I put an axis in the middle, or center, of

Question

Editorial Team

Asked: June 16, 20262026-06-16T01:16:22+00:00 2026-06-16T01:16:22+00:00

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?

You must login to add an answer.

Need An Account,

Editorial Team · Answer 1 · 2026-06-16T01:16:23+00:00

Editorial Team

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

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.

The Archive Base Latest Questions