tessl/npm-d3-zoom

Pan and zoom SVG, HTML or Canvas using mouse or touch input

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Zoom Behavior

Name: tessl/npm-d3-zoom
Author: tessl

Core zoom behavior functionality for creating and applying pan/zoom interactions to DOM elements.

Capabilities

Zoom Behavior Creation

Creates a new zoom behavior instance that can be applied to selections.

/**
 * Creates a new zoom behavior instance
 * @returns ZoomBehavior - Configurable zoom behavior
 */
function zoom(): ZoomBehavior;

Usage Examples:

import { zoom } from "d3-zoom";
import { select } from "d3-selection";

// Create basic zoom behavior
const zoomBehavior = zoom();

// Apply to SVG
const svg = select("svg").call(zoomBehavior);

// Create zoom with event handler
const zoomWithHandler = zoom()
  .on("zoom", (event) => {
    console.log("Zoom transform:", event.transform);
    svg.attr("transform", event.transform);
  });

Behavior Application

Applies zoom behavior to selections, binding event listeners and initializing transform state.

/**
 * Applies zoom behavior to a selection
 * @param selection - D3 selection to apply zoom behavior to
 */
(selection: Selection): void;

Usage Examples:

import { select } from "d3-selection";
import { zoom } from "d3-zoom";

const svg = select("svg");
const zoomBehavior = zoom()
  .scaleExtent([0.5, 10])
  .on("zoom", handleZoom);

// Apply zoom behavior
svg.call(zoomBehavior);

// Remove zoom behavior later
svg.on(".zoom", null);

function handleZoom(event) {
  const { transform } = event;
  svg.select("g").attr("transform", transform);
}

Direct Transform Control

Sets the zoom transform directly on selections or transitions.

/**
 * Sets the zoom transform directly
 * @param selection - Selection or transition to apply transform to
 * @param transform - ZoomTransform or function returning ZoomTransform
 * @param point - Reference point for the transformation (optional)
 * @returns ZoomBehavior for method chaining
 */
transform(
  selection: Selection | Transition, 
  transform: ZoomTransform | TransformFunction, 
  point?: Point | PointFunction
): ZoomBehavior;

Usage Examples:

import { select } from "d3-selection";
import { zoom, zoomIdentity } from "d3-zoom";

const svg = select("svg");
const zoomBehavior = zoom();

// Instant transform
svg.call(zoomBehavior.transform, zoomIdentity.scale(2));

// Animated transform
svg.transition()
  .duration(750)
  .call(zoomBehavior.transform, zoomIdentity.scale(2).translate(100, 50));

// Transform with reference point
svg.call(zoomBehavior.transform, zoomIdentity.scale(2), [400, 300]);

// Dynamic transform
svg.call(zoomBehavior.transform, function(d) {
  return zoomIdentity.scale(d.scaleFactor);
});

Translate Operations

Convenience methods for translating the current zoom transform.

/**
 * Translates the current transform by the specified amounts
 * @param selection - Selection or transition to apply translation to
 * @param x - X translation amount or function
 * @param y - Y translation amount or function
 * @returns ZoomBehavior for method chaining
 */
translateBy(
  selection: Selection | Transition, 
  x: number | NumberFunction, 
  y: number | NumberFunction
): ZoomBehavior;

/**
 * Translates so the specified point appears at the given location
 * @param selection - Selection or transition to apply translation to
 * @param x - X coordinate of point to center
 * @param y - Y coordinate of point to center
 * @param p - Target location (defaults to viewport center)
 * @returns ZoomBehavior for method chaining
 */
translateTo(
  selection: Selection | Transition, 
  x: number | NumberFunction, 
  y: number | NumberFunction, 
  p?: Point | PointFunction
): ZoomBehavior;

Usage Examples:

import { select } from "d3-selection";
import { zoom } from "d3-zoom";

const svg = select("svg");
const zoomBehavior = zoom();

// Translate by fixed amounts
svg.call(zoomBehavior.translateBy, 50, -30);

// Animated translation
svg.transition()
  .duration(500)
  .call(zoomBehavior.translateBy, 100, 0);

// Center a specific point
svg.call(zoomBehavior.translateTo, 200, 150);

// Center point at specific location
svg.call(zoomBehavior.translateTo, 200, 150, [400, 300]);

// Dynamic translation
svg.call(zoomBehavior.translateBy, function(d) {
  return d.deltaX;
}, function(d) {
  return d.deltaY;
});

Scale Operations

Convenience methods for scaling the current zoom transform.

/**
 * Scales the current transform by the specified factor
 * @param selection - Selection or transition to apply scaling to
 * @param k - Scale factor or function
 * @param p - Reference point for scaling (optional)
 * @returns ZoomBehavior for method chaining
 */
scaleBy(
  selection: Selection | Transition, 
  k: number | NumberFunction, 
  p?: Point | PointFunction
): ZoomBehavior;

/**
 * Scales the current transform to the specified factor
 * @param selection - Selection or transition to apply scaling to
 * @param k - Target scale factor or function
 * @param p - Reference point for scaling (optional)
 * @returns ZoomBehavior for method chaining
 */
scaleTo(
  selection: Selection | Transition, 
  k: number | NumberFunction, 
  p?: Point | PointFunction
): ZoomBehavior;

Usage Examples:

import { select } from "d3-selection";
import { zoom } from "d3-zoom";

const svg = select("svg");
const zoomBehavior = zoom();

// Scale by factor of 2
svg.call(zoomBehavior.scaleBy, 2);

// Scale to specific level
svg.call(zoomBehavior.scaleTo, 1.5);

// Scale around specific point
svg.call(zoomBehavior.scaleBy, 2, [200, 150]);

// Animated scaling
svg.transition()
  .duration(750)
  .call(zoomBehavior.scaleTo, 3, [400, 300]);

// Dynamic scaling
const zoomIn = () => svg.call(zoomBehavior.scaleBy, 1.5);
const zoomOut = () => svg.call(zoomBehavior.scaleBy, 0.75);
const resetZoom = () => svg.transition()
  .duration(750)
  .call(zoomBehavior.scaleTo, 1);

Install with Tessl CLI