Axes.js
export const Axes = ({ xScale, innerHeight, plotWidth, tickOffset = 20 }) => (
<g className="axis">
<line
transform={`translate(${xScale(1)},0)`}
y2={innerHeight}
stroke="#111"
strokeWidth="2"
/>
<line
transform={`translate(0,${innerHeight})`}
x2={plotWidth}
stroke="#111"
strokeWidth="2"
/>
{xScale.ticks(2).map((tick) => (
<g
className="tick"
transform={`translate(${xScale(tick)},${innerHeight})`}
>
<text y={tickOffset} dy="0.32em" textAnchor="middle">
{tick.toFixed(2)}
</text>
<line
transform={`translate(0,${- tickOffset / 4})`}
y2={tickOffset / 2}
stroke="#111"
strokeWidth="2"
/>
</g>
))}
</g>
);
