Zooming API in D3.js

Zooming API supports the content scaling. We can concentrate on a specific region with the help of the click-and-drag method.

Let's discuss in detail.

Configuring API

The following mentioned script can be used to load Zooming API from "d3js.org".

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>
<script src = "https://d3js.org/d3-zoom.v1.min.js"></script>
<body>
<script>
</script>
</body>

Methods of Zooming API

The methods of Zooming API are listed below:

1. zoom()

It creates a zoom behavior. The following script can be used to access it.

<script>
var zoom = d3.zoom();
</script>

2. zoom(selection)

It can be used for some selected item's zoom transformation application.

For example, we may instantiate the behavior of mousedown.zoom with the help of the following script:

3. transform(selection, transform)

It is used to fix the selected item's latest zoom transform to the described transform.

For example, following script can be used to reset any zoom transform towards an identity transform.

Also, we may reset any zoom transform towards an identity transform for 1000ms with the following mentioned syntax:

4. translateBy(selection, x, y)

It is applied to translate the selected item's latest zoom transform by the values x and y. We can describe translation values (x, and y) as functions or as numbers that will return numbers. In case, any function has invoked to the selected items, it will be passed by the index 'i' and latest datum 'd' for DOM. The sample code can be as follows:

zoom.translateBy(selection, x, y) {
zoom.transform(selection, function() {
return constrain(this.__zoom.translate(
x = = = "function" ? x.apply(this, arguments) : x,
y = = = "function" ? y.apply(this, arguments) : y
);
}
};

5. translateTo(selection, x, y)

It is applied to translate some selected item's latest zoom transform to the described x and y position.

6. scaleTo(selection, k)

It is applied to scale some selected item's latest zoom transform to k. Where k can be defined as any scale factor, described as the functions or numbers.

zoom.scaleTo = function(selection, k) {
zoom.transform(selection, function() {
k = = = "function" ? k.apply(this, arguments) : k;
});
};

7. scaleBy(selection, k)

It is applied to scale some selected item's latest zoom transform to k. Where k can be defined as any scale factor, described as the functions or numbers that will return the numbers.

zoom.scaleBy = function(selection, k) {
zoom.scaleTo(selection, function() {
var k0 = this.__zoom.k,
k1 = k = = = "function" ? k.apply(this, arguments) : k;
return k0 * k1;
});
};

8. filter([filter])

It can be used to fix the filter for any described function to zoom behavior. It will return the latest filter if no filter is described.

It is depicted as follows:

function filter() {
return !d3.event.button;
}

9. wheelDelta([delta])

The function, i.e., wheel delta, is used to return the Δ value. In case, no delta is described, then it will return the latest function wheel delta.

10. extent([extent])

It is used to fix an extent to any described array points. In case, no extent is described, it will return the latest extent accessor, defaults to range [0, 0], [height, width], here client height is the height and item's client width is the width.

11. scaleExtent([extent])

It is used to fix any scale extent towards the described numbers array [k0, k1]. Where,

k0: minimum permitted scale factor

k1: maximum permitted scale factor.

In case, no extent is described, it will return the latest scale extent, defaults to range [0, ∞]. The following sample code can be considered, which is defined below:

selection
.call(zoom)
.on("wheel", function() { d3.event.preventDefault(); });

12. translateExtent([extent])

In case, an extent is described, it will fix a translate extent for any described point's array. When no extent is described, it will return the latest translate extent, defaults to range [[-∞, -∞], [+∞, +∞]].

13. clickDistance([distance])

It is applied to fix a maximum distance, i.e., any zoomable area may transfer among the down and up, which can trigger an event called subsequent click.

14. duration([duration])

The above method can be used to fix the duration for the zoom transitions. It can be carried over double-tap and double-click for the described number of milliseconds, which will return the zoom nature. It will also return the latest duration i.e. 250ms by default if no duration is specified.

It is depicted as follows:

selection
.call(zoom)
.on("dblclick.zoom", null);

15. interpolate([interpolate])

It is applied to interpolate to zoom transitions for the described function. In case, no interpolate is defined, it will return the latest interpolation factory, defaults to the d3.interpolateZoom.

16. on(typenames[, listener])

It will set an event listener to the described typename if no listener is defined. It will also return the zoom nature. A typename is the string having multiple typename isolated by whitespace. All the typenames are the type, pursued by a name and a period (.), like the zoom.second and zoom.one. The name permits several listeners who are registered to similar types. The type should belong from the following:

Start: The Start field is used after the zooming starts (like the on mousedown).
Zoom: The Zoom field is used after any change in the zoom transform (like the on mousemove).
End: The End field is used after the zooming ends(like the on mouseup).

Next Topic#

← prev next →