TransformGroup

TransformGroup provides a shared domain, size, and padding to plot components in its default slot.

Import

import { TransformGroup } from '@putianyi888/vue3-plots'

Example

<TransformGroup ref="transformGroup" :domain="domain" :size="{ width: 640, height: 360 }">
  <Grid :x-ticks="xTicks" :y-ticks="yTicks" />
  <Line :points="points" />
  <Scatter :points="points" />
  <Axis direction="horizontal" :ticks="xTicks" />
  <Axis direction="vertical" :ticks="yTicks" />
</TransformGroup>

Props

Prop	Type	Default	Description
size	PlotSize	{ width: 320, height: 200 }	Outer SVG size provided to child plot layers.
padding	PlotPadding	defaultPlotPadding	Insets provided to child plot layers.
domain	PlotDomain	Required	Data-space bounds provided to child plot layers.

Slots

Slot	Props	Description
default	None	Plot layers that share this transform context.

Exposed

Exposed	Type	Description
scaleX	(value: number) => number	Maps an x value from data coordinates to SVG coordinates.
scaleY	(value: number) => number	Maps a y value from data coordinates to SVG coordinates.

Notes

Child components can still pass their own domain, size, or padding props. Explicit child props override the values from TransformGroup.

Use a template ref to access the exposed scaleX and scaleY functions when custom code needs the same coordinate transform as the plot layers.