Learn D3.js

Interactive zoom

Interactive zooming is automatically triggered by native input events, such as mousedown or touchstart. In the following code, the zoom behavior is configured and called from a selection containing the svg object. It will affect both the square (rect) and grid since svg is their common ancestor:

const zoom = d3.zoom()        .duration(1000) // duration for double-click zooming        .on('zoom', function() {            console.log(d3.event.transform.toString())            svg.attr("transform", d3.event.transform);        });svg.call(zoom);

The transform property of d3.event is a transformation object with the following structure: {x, y, k}, where x and y are translation coordinates and k is the scale factor. If you call it in a string context or use its toString() ...