Drag and Zoom

tag: <hpcc-zoom>

TIP

See Getting Started for details on how to include @hpcc-js/web-components in your application

Attributes

scale_max

The maximum scale extent that can be applied to the content

Type: number

Default Value: 0.5

scale_min

The minimum scale extent that can be applied to the content

Type: number

Default Value: 0.5

scale

The current scale of the content

Type: number

Default Value: 1

x

The current x-position of the content

Type: number

Default Value: 0

y

The current y-position of the content

Type: number

Default Value: 0

Events

changed

Emitted whenever the content is panned or zoomed

Credits

d3-zoom

Panning and zooming are popular interaction techniques which let the user focus on a region of interest by restricting the view. It is easy to learn due to direct manipulation: click-and-drag to pan (translate), spin the wheel to zoom (scale), or use touch. Panning and zooming are widely used in web-based mapping, but can also be used with visualizations such as time-series and scatterplots.