I am in the process of creating a legend for my d3 project. I have ten rectangles arranged from left to right and I want to position text above each rectangle at a slight angle to the right. I have tried applying rotation but it seems to be rotating all the text elements as a group, instead of individually relative to each cell.
Does anyone have any suggestions on how to style or group the elements differently so that each text element rotates around its own center, rather than in a single line?
Below is the current state of my code:
<svg preserveAspectRatio="xMinYMin meet" viewBox={`0 0 800 70`}>
<g transform={`translate(${[dms.marginTop, dms.marginLeft].join(',')}`>
<g>
{range(10).map((d) => (
<>
<rect
key={`${d}_legendCell`}
width={cellSize - 1.5}
height={cellSize - 1.5}
fill={colorScale(Number(legendBands(String(d))) + interval)}
x={d * cellSize}
></rect>
<text
key={`${d}_legendLabel`}
fontWeight="300"
fontSize="12"
width="100"
y={cellSize * d}
transform="rotate(290)"
dy=".85rem"
>
{Number(legendBands(String(d))).toFixed(1)}
</text>
</>
))}
</g>
</g>
</svg>
Any help would be greatly appreciated!