Configuration Options

/**
 * Gets or sets the event filter function
 * @param filter - Function to determine if events should be handled (optional)
 * @returns Current filter function or ZoomBehavior for chaining
 */
filter(filter?: FilterFunction): ZoomBehavior | FilterFunction;

type FilterFunction = (this: Element, event: Event, d: any) => boolean;

function defaultFilter(event) {
  return (!event.ctrlKey || event.type === 'wheel') && !event.button;
}

import { zoom } from "d3-zoom";

// Only allow left mouse button and touch
const zoomBehavior = zoom()
  .filter((event) => {
    return event.button === 0 || event.type.startsWith('touch');
  });

// Disable zoom on specific elements
const conditionalZoom = zoom()
  .filter(function(event) {
    return !this.classList.contains('no-zoom');
  });

// Allow all events
const permissiveZoom = zoom()
  .filter(() => true);

// Get current filter
const currentFilter = zoomBehavior.filter();

/**
 * Gets or sets the touch support detector
 * @param touchable - Function to detect touch support (optional)
 * @returns Current touchable function or ZoomBehavior for chaining
 */
touchable(touchable?: TouchableFunction): ZoomBehavior | TouchableFunction;

type TouchableFunction = (this: Element) => boolean;

function defaultTouchable() {
  return navigator.maxTouchPoints || ("ontouchstart" in this);
}

import { zoom } from "d3-zoom";

// Force touch support
const forceTouchZoom = zoom()
  .touchable(() => true);

// Disable touch support
const noTouchZoom = zoom()
  .touchable(() => false);

// Custom touch detection
const customTouchZoom = zoom()
  .touchable(function() {
    return this.hasAttribute('data-touch-enabled');
  });

/**
 * Gets or sets the wheel delta calculation function
 * @param delta - Function to calculate wheel event scaling (optional)
 * @returns Current delta function or ZoomBehavior for chaining
 */
wheelDelta(delta?: WheelDeltaFunction): ZoomBehavior | WheelDeltaFunction;

type WheelDeltaFunction = (this: Element, event: WheelEvent, d: any) => number;

function defaultWheelDelta(event) {
  return -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * (event.ctrlKey ? 10 : 1);
}

import { zoom } from "d3-zoom";

// Slower zoom sensitivity
const slowZoom = zoom()
  .wheelDelta((event) => -event.deltaY * 0.001);

// Faster zoom sensitivity
const fastZoom = zoom()
  .wheelDelta((event) => -event.deltaY * 0.01);

// Inverted zoom direction
const invertedZoom = zoom()
  .wheelDelta((event) => event.deltaY * 0.002);

// Constant zoom step
const stepZoom = zoom()
  .wheelDelta((event) => event.deltaY > 0 ? -0.1 : 0.1);

/**
 * Gets or sets the viewport extent
 * @param extent - Extent array or function returning extent (optional)
 * @returns Current extent function or ZoomBehavior for chaining
 */
extent(extent?: ExtentFunction | [[number, number], [number, number]]): ZoomBehavior | ExtentFunction;

type ExtentFunction = (this: Element, d: any) => [[number, number], [number, number]];

function defaultExtent() {
  const e = this;
  if (e instanceof SVGElement) {
    e = e.ownerSVGElement || e;
    if (e.hasAttribute("viewBox")) {
      const viewBox = e.viewBox.baseVal;
      return [[viewBox.x, viewBox.y], [viewBox.x + viewBox.width, viewBox.y + viewBox.height]];
    }
    return [[0, 0], [e.width.baseVal.value, e.height.baseVal.value]];
  }
  return [[0, 0], [e.clientWidth, e.clientHeight]];
}

import { zoom } from "d3-zoom";

// Fixed viewport extent
const fixedExtentZoom = zoom()
  .extent([[0, 0], [800, 600]]);

// Dynamic extent based on element
const responsiveZoom = zoom()
  .extent(function() {
    const rect = this.getBoundingClientRect();
    return [[0, 0], [rect.width, rect.height]];
  });

// Data-dependent extent
const dataExtentZoom = zoom()
  .extent(function(d) {
    return [[0, 0], [d.width, d.height]];
  });

/**
 * Gets or sets the scale extent limits
 * @param extent - [min, max] scale factors (optional)
 * @returns Current scale extent or ZoomBehavior for chaining
 */
scaleExtent(extent?: [number, number]): ZoomBehavior | [number, number];

import { zoom } from "d3-zoom";

// Limit zoom range
const limitedZoom = zoom()
  .scaleExtent([0.1, 10]); // 10% to 1000%

// Zoom in only
const zoomInOnly = zoom()
  .scaleExtent([1, 5]); // 100% to 500%

// No scale limits
const unlimitedZoom = zoom()
  .scaleExtent([0, Infinity]);

// Get current limits
const [minScale, maxScale] = zoomBehavior.scaleExtent();

/**
 * Gets or sets the translate extent limits
 * @param extent - [[x0, y0], [x1, y1]] translation bounds (optional)
 * @returns Current translate extent or ZoomBehavior for chaining
 */
translateExtent(extent?: [[number, number], [number, number]]): ZoomBehavior | [[number, number], [number, number]];

import { zoom } from "d3-zoom";

// Restrict panning to specific area
const boundedZoom = zoom()
  .translateExtent([[-1000, -1000], [1000, 1000]]);

// No panning restrictions
const freeZoom = zoom()
  .translateExtent([[-Infinity, -Infinity], [Infinity, Infinity]]);

// Data bounds
const dataBoundedZoom = zoom()
  .translateExtent([[0, 0], [2000, 1500]]);

/**
 * Gets or sets the transform constraint function
 * @param constrain - Function to constrain transforms (optional)
 * @returns Current constraint function or ZoomBehavior for chaining
 */
constrain(constrain?: ConstrainFunction): ZoomBehavior | ConstrainFunction;

type ConstrainFunction = (
  transform: ZoomTransform, 
  extent: [[number, number], [number, number]], 
  translateExtent: [[number, number], [number, number]]
) => ZoomTransform;

import { zoom } from "d3-zoom";

// Custom constraint that keeps content centered
const centeredZoom = zoom()
  .constrain((transform, extent, translateExtent) => {
    const dx0 = transform.invertX(extent[0][0]) - translateExtent[0][0];
    const dx1 = transform.invertX(extent[1][0]) - translateExtent[1][0];
    const dy0 = transform.invertY(extent[0][1]) - translateExtent[0][1];
    const dy1 = transform.invertY(extent[1][1]) - translateExtent[1][1];
    
    return transform.translate(
      dx1 > dx0 ? (dx0 + dx1) / 2 : Math.min(0, dx0) || Math.max(0, dx1),
      dy1 > dy0 ? (dy0 + dy1) / 2 : Math.min(0, dy0) || Math.max(0, dy1)
    );
  });

// No constraints
const unconstrainedZoom = zoom()
  .constrain((transform) => transform);

/**
 * Gets or sets the transition duration for double-click/tap
 * @param duration - Duration in milliseconds (optional)
 * @returns Current duration or ZoomBehavior for chaining
 */
duration(duration?: number): ZoomBehavior | number;

import { zoom } from "d3-zoom";

// Fast transitions
const quickZoom = zoom()
  .duration(100);

// Slow transitions
const slowZoom = zoom()
  .duration(1000);

// Instant transitions
const instantZoom = zoom()
  .duration(0);

// Disable double-click zoom
const svg = select("svg")
  .call(zoom())
  .on("dblclick.zoom", null);

/**
 * Gets or sets the zoom interpolation function
 * @param interpolate - Interpolation function (optional)
 * @returns Current interpolate function or ZoomBehavior for chaining
 */
interpolate(interpolate?: InterpolateFunction): ZoomBehavior | InterpolateFunction;

type InterpolateFunction = (a: any, b: any) => (t: number) => any;

import { zoom } from "d3-zoom";
import { interpolate } from "d3-interpolate";

// Linear interpolation instead of smooth zoom
const linearZoom = zoom()
  .interpolate(interpolate);

// Custom interpolation
const customZoom = zoom()
  .interpolate((a, b) => {
    return (t) => {
      // Custom interpolation logic
      return [
        a[0] + (b[0] - a[0]) * t,
        a[1] + (b[1] - a[1]) * t,
        a[2] + (b[2] - a[2]) * t
      ];
    };
  });

/**
 * Gets or sets the click distance threshold
 * @param distance - Maximum mouse movement for click detection (optional)
 * @returns Current click distance or ZoomBehavior for chaining
 */
clickDistance(distance?: number): ZoomBehavior | number;

/**
 * Gets or sets the double-tap distance threshold
 * @param distance - Maximum movement between taps (optional)
 * @returns Current tap distance or ZoomBehavior for chaining
 */
tapDistance(distance?: number): ZoomBehavior | number;

import { zoom } from "d3-zoom";

// More sensitive click detection
const sensitiveZoom = zoom()
  .clickDistance(2);

// Less sensitive click detection
const tolerantZoom = zoom()
  .clickDistance(20);

// Precise double-tap requirement
const preciseZoom = zoom()
  .tapDistance(5);

// Loose double-tap requirement
const looseZoom = zoom()
  .tapDistance(50);