A translation shifts an SVG element or group horizontally, vertically, or both. Applying it to a group moves every descendant together and creates a local coordinate system for chart construction. section 3.6 section 4.1.1
Use translation to position visual elements without recalculating each child’s coordinates:
- Reserve chart margins by translating one inner-chart group by the left and top margins. section 4.1.1
- Place repeated chart groups horizontally with a D3 scale and vertically at the center of the available chart area. section 5.1.1
- Arrange responsive small multiples by translating each group according to its column and row. section 14.4.2
Positioning an inner chart
Create the SVG container, append a group, and translate that group by the reserved margins: const innerChart = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`); Build axes and marks inside innerChart so they share the translated coordinate system. section 4.1.1
Listing 14.4 Adding a responsive grid (Grid.svelte)
{#if svgWidth && svgHeight}
<svg width={svgWidth} height={svgHeight}>
{#each years as year, i} #1
<g transform="translate( #2
{(i % numColumns) * smWidth},
{Math.floor(i / numColumns) * smHeight})"
>
<rect x={0} y={0} width={smWidth} #3
height={smHeight} />
</g>
{/each}
</svg>
{/if}
<style>
svg {
border: 1px solid magenta;
}
rect {
fill: none;
stroke: cyan;
}
</style>
Inspect the responsive-grid implementation to see modulo determine columns, row calculation determine vertical placement, and transform apply both offsets. section 14.4.2
