PanZoom

Pan and Zoom

Pan and zoom work by updating the domain for the x and/or y scales. Instead of having the scale domain set by the extent of the data that it is bound to, the domain is set using a signal which calculates the current domain based on user interaction.

Nomenclature

Constants

• width: number – Width of the charting area in pixels
• height: number – Height of the charting area in pixels

Pan Inputs

• initialXDomain: [number, number] – Start and end of the x domain at the beginning of the pan interaction
• initialYDomain: [number, number] – Start and end of the y domain at the beginning of the pan interaction
• panDelta: [number, number] – x and y difference in pixels from the beginning of the pan to the current position

Zoom Inputs

• zoomAnchor: [number, number] – x and y domain coordinates to zoom in/out from
• zoomRatio: number: zoom ratio

Outputs

• xDomain: [number, number] – Start and end of the x domain
• yDomain: [number, number] – Start and end of the y domain

Algorithm

Pan

const initialXSpan = initialXDomain[1] - initialXDomain[0];
const xPanRatio = panDelta[0] / width;
const xDomainOffset = initialXSpan * xPanRatio;

const initialYSpan = initialYDomain[1] - initialYDomain[0];
const yPanRatio = panDelta[1] / height;
const yDomainOffset = initialYSpan * yPanRatio;

const xDomain = [
    initialXDomain[0] + xDomainOffset,
    initialXDomain[1] + xDomainOffset,
]
const yDomain = [
    initialYDomain[0] + yDomainOffset,
    initialYDomain[1] + yDomainOffset,
]
return {xDomain, yDomain}

Zoom

const xDomain = [
    zoomAnchor[0] + (xDomain[0] - zoomAnchor[0]) * zoomRatio,
    zoomAnchor[0] + (xDomain[1] - zoomAnchor[0]) * zoomRatio,
]