Move x axis to the bottom

[jackdbd]

Probably this will sound as a really dumb question, but how do I move the x axis to the bottom of a chart?

I tried to use style={{ orient: BOTTOM }}, but that affects only the ticks, not the <g> element of the axis.

<Axis {...axisPropsFromBandedScale(widthScale)} style={{ orient: BOTTOM }} />

Are there any props I can pass to translate the <g> element?

By the way, cool library, I was looking for a way to avoid using refs for d3 axes.

[shauns]

Thanks! This library is pretty low-level -- so you can wrap the <g> with another <g> with a transform to position it in your chart. Something like:

<g transform={`translate(${padding}, ${padding + innerHeight})`}>
          <Axis
            {...axisPropsFromTickScale(xScale, 10)}
            style={{orient: BOTTOM}}
          />
        </g>
        <g transform={`translate(${padding}, ${padding})`}>
          <Axis
            {...axisPropsFromTickScale(yScale, 10)}
            style={{orient: LEFT}}
          />
        </g>