@types/d3-zoom

What is @types/d3-zoom?

@types/d3-zoom provides TypeScript definitions for the d3-zoom module, which is part of the D3.js library. This module allows for panning and zooming of SVG elements, making it easier to create interactive visualizations.

What are @types/d3-zoom's main functionalities?

Zoom Behavior

This feature allows you to define a zoom behavior that can be applied to an SVG element. The 'zoom' event updates the transformation of the SVG element based on user interactions.

const zoom = d3.zoom().on('zoom', (event) => { svg.attr('transform', event.transform); });

Applying Zoom to an Element

This code applies the previously defined zoom behavior to an SVG element, enabling panning and zooming interactions.

d3.select('svg').call(zoom);

Setting Initial Zoom Transform

This feature allows you to set an initial zoom transform, specifying the initial translation and scale of the SVG element.

svg.call(zoom.transform, d3.zoomIdentity.translate(100, 50).scale(2));

Other packages similar to @types/d3-zoom

d3-zoom

The d3-zoom package is the core library for zooming and panning in D3.js. It provides the actual implementation of the zoom behavior, while @types/d3-zoom provides TypeScript definitions for it.

react-d3-zoom

react-d3-zoom is a React component that wraps the d3-zoom functionality, making it easier to integrate zooming and panning behaviors in React applications. It provides a higher-level abstraction compared to @types/d3-zoom.

d3-zoomable

d3-zoomable is a lightweight library that provides zooming and panning capabilities for D3.js visualizations. It is similar to d3-zoom but focuses on simplicity and ease of use.

README

Installation

npm install --save @types/d3-zoom

Summary

This package contains type definitions for d3JS d3-zoom module (https://github.com/d3/d3-zoom/).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/d3-zoom/v2.

Additional Details

• Last updated: Sat, 26 Jun 2021 11:31:33 GMT
• Dependencies: @types/d3-interpolate, @types/d3-selection
• Global values: none

Credits

These definitions were written by Tom Wanzek, Alex Ford, Boris Yankov, denisname, and Nathan Bierema.