CODEWITHSUNDEEP
d3.js
graph
graph

Reputation: 387

d3 axis orientation: center

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?

Upvotes: 7

Views: 9121

Answers (1)

tjltjl
tjltjl

Reputation: 1479

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.

Upvotes: 7

Related Questions