Transform Operations

/**
 * Returns the current zoom transform for the specified element
 * @param node - DOM element to get transform from
 * @returns ZoomTransform - Current transform or identity if none exists
 */
function zoomTransform(node: Element): ZoomTransform;

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

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

// Get current transform
const currentTransform = zoomTransform(svg.node());
console.log(`Scale: ${currentTransform.k}, X: ${currentTransform.x}, Y: ${currentTransform.y}`);

// Use in event handler
svg.on("click", function(event) {
  const transform = zoomTransform(this);
  const [x, y] = transform.invert([event.clientX, event.clientY]);
  console.log("Data coordinates:", x, y);
});

/**
 * Creates a new zoom transform
 * @param k - Scale factor
 * @param x - X translation
 * @param y - Y translation
 */
class ZoomTransform {
  constructor(k: number, x: number, y: number);
  
  /** Scale factor */
  readonly k: number;
  /** X translation */
  readonly x: number;
  /** Y translation */
  readonly y: number;
}

import { ZoomTransform, zoomIdentity } from "d3-zoom";

// Create custom transform
const customTransform = new ZoomTransform(2, 100, 50);
console.log(customTransform.k); // 2
console.log(customTransform.x); // 100
console.log(customTransform.y); // 50

// Use identity transform
console.log(zoomIdentity.k); // 1
console.log(zoomIdentity.x); // 0
console.log(zoomIdentity.y); // 0

/**
 * The identity transform (k=1, x=0, y=0)
 */
const zoomIdentity: ZoomTransform;

/**
 * Returns a new transform scaled by the specified factor
 * @param k - Scale factor to apply
 * @returns New ZoomTransform
 */
scale(k: number): ZoomTransform;

/**
 * Returns a new transform translated by the specified amounts
 * @param x - X translation in transformed coordinates
 * @param y - Y translation in transformed coordinates
 * @returns New ZoomTransform
 */
translate(x: number, y: number): ZoomTransform;

import { zoomIdentity } from "d3-zoom";

// Create scaled transform
const scaled = zoomIdentity.scale(2);
console.log(scaled.k); // 2

// Chain operations
const transformed = zoomIdentity
  .translate(100, 50)
  .scale(1.5)
  .translate(-20, 10);

console.log(transformed.k); // 1.5
console.log(transformed.x); // 130 (100 * 1.5 - 20)
console.log(transformed.y); // 85 (50 * 1.5 + 10)

// Transforms are immutable
const base = zoomIdentity.scale(2);
const modified = base.translate(50, 25);
console.log(base.x); // 0 (unchanged)
console.log(modified.x); // 100 (50 * 2)

/**
 * Transforms a point from data coordinates to screen coordinates
 * @param point - [x, y] coordinates in data space
 * @returns [x, y] coordinates in screen space
 */
apply(point: [number, number]): [number, number];

/**
 * Transforms an x-coordinate from data space to screen space
 * @param x - X coordinate in data space
 * @returns X coordinate in screen space
 */
applyX(x: number): number;

/**
 * Transforms a y-coordinate from data space to screen space
 * @param y - Y coordinate in data space
 * @returns Y coordinate in screen space
 */
applyY(y: number): number;

import { zoomIdentity } from "d3-zoom";

const transform = zoomIdentity.translate(100, 50).scale(2);

// Transform point
const dataPoint = [10, 20];
const screenPoint = transform.apply(dataPoint);
console.log(screenPoint); // [120, 90] (10*2+100, 20*2+50)

// Transform individual coordinates
const screenX = transform.applyX(10); // 120
const screenY = transform.applyY(20); // 90

// Use in visualization
function drawPoint(x, y, transform) {
  const [screenX, screenY] = transform.apply([x, y]);
  context.fillRect(screenX, screenY, 2, 2);
}

/**
 * Inverse transforms a point from screen coordinates to data coordinates
 * @param location - [x, y] coordinates in screen space
 * @returns [x, y] coordinates in data space
 */
invert(location: [number, number]): [number, number];

/**
 * Inverse transforms an x-coordinate from screen space to data space
 * @param x - X coordinate in screen space
 * @returns X coordinate in data space
 */
invertX(x: number): number;

/**
 * Inverse transforms a y-coordinate from screen space to data space
 * @param y - Y coordinate in screen space
 * @returns Y coordinate in data space
 */
invertY(y: number): number;

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

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

// Handle mouse click
svg.on("click", function(event) {
  const transform = zoomTransform(this);
  const [mouseX, mouseY] = [event.clientX, event.clientY];
  
  // Convert to data coordinates
  const [dataX, dataY] = transform.invert([mouseX, mouseY]);
  console.log("Clicked at data coordinates:", dataX, dataY);
});

// Convert screen bounds to data bounds
function getVisibleDataBounds(transform, width, height) {
  const topLeft = transform.invert([0, 0]);
  const bottomRight = transform.invert([width, height]);
  return {
    left: topLeft[0],
    top: topLeft[1],
    right: bottomRight[0],
    bottom: bottomRight[1]
  };
}

/**
 * Returns a copy of the continuous scale with transformed domain for x-axis
 * @param x - d3-scale continuous scale
 * @returns Scale with domain adjusted for current transform
 */
rescaleX(x: ContinuousScale): ContinuousScale;

/**
 * Returns a copy of the continuous scale with transformed domain for y-axis
 * @param y - d3-scale continuous scale
 * @returns Scale with domain adjusted for current transform
 */
rescaleY(y: ContinuousScale): ContinuousScale;

import { scaleLinear } from "d3-scale";
import { axisLeft, axisBottom } from "d3-axis";
import { zoom, zoomTransform } from "d3-zoom";

// Create scales
const xScale = scaleLinear().domain([0, 100]).range([0, 800]);
const yScale = scaleLinear().domain([0, 50]).range([600, 0]);

// In zoom event handler
function zoomed(event) {
  const { transform } = event;
  
  // Rescale for current zoom level
  const newXScale = transform.rescaleX(xScale);
  const newYScale = transform.rescaleY(yScale);
  
  // Update axes
  svg.select(".x-axis").call(axisBottom(newXScale));
  svg.select(".y-axis").call(axisLeft(newYScale));
  
  // Redraw data using new scales
  svg.selectAll(".data-point")
    .attr("cx", d => newXScale(d.x))
    .attr("cy", d => newYScale(d.y));
}

/**
 * Returns SVG transform string representation
 * @returns String suitable for SVG transform attribute
 */
toString(): string;

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

const transform = zoomIdentity.translate(100, 50).scale(2);

// Apply to SVG element
const g = select("g");
g.attr("transform", transform.toString());
// Results in: "translate(100,50) scale(2)"

// Use in zoom event handler
function zoomed(event) {
  const { transform } = event;
  svg.select("g").attr("transform", transform);
  // toString() is called automatically
}

// Manual string construction (not recommended)
console.log(transform.toString()); // "translate(100,50) scale(2)"