Zooming API in D3.js

Zooming API in D3.js

The Zooming API facilitates you with the Content’s Scaling. This API allows you to focus on the specific area with the help of click-and-drag method. In this chapter, we have explained the zooming API in detail.   

Configuration of zooming API

You can use the zooming API from the ‘d3js.org’ with the help of below given code.

<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

Here, we have some prominent methods used in zooming API given below.

  • d3.zoom()
  • zoom.transform(selection, transform)
  • zoom(selection)
  • zoom.translateTo(selection, x, y)
  • zoom.translateBy(selection, x, y)
  • zoom.scaleBy(selection, k)
  • zoom.scaleTo(selection, k)
  • zoom.wheelDelta([delta])
  • zoom.filter([filter])
  • zoom.scaleExtent([extent])
  • zoom.extent([extent])
  • zoom.translateExtent([extent])
  • zoom.duration([duration])
  • zoom.clickDistance([distance])
  • zoom.on(typesnames[, listener])
  • zoom.interpolate([interpolate])

Let’s discuss each method of zoom API in detail.

d3.zoom()

It can be applied to design a new zoom behavior. You can use the following script to access it.

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

This method can be used to fix the selected zoom transform of the item to a specified transform.

Example- You can use the following script to fix the zoom transform over an identity transform.

selection.call(zoom.transform, d3.zoomIdentity);

You can also fix the zoom transform of the element to the Identity zoom for 5000ms with the help of below explained script.

selection.transition().duration(5000).call(zoom.transform, d3.zoomIdentity);  

zoom(selection)

This method can be applied to perform zoom transformation for a selected component.

Example- If you want to instantiate the mousedown.zoom behavior, then you can use the below-given code.

selection.call(d3.zoom().on("mousedown.zoom", mousedowned));  

zoom.translateTo(selection, x, y)

This method can be applied to translate the defined zoom of the items to the defined position x and y.

zoom.translateBy(selection, x, y)

This method helps you to translate the latest zoom transform of the elements with the help of x and y. You need to define the values of x and y in the form of number or function, and return the numbers.

If any function calls the selected element, then the function is passed by the datum “d” and index “i” for the document object model.

Here, we have the following script for the above method.

zoom.translateBy(selection, x, y)
{
            zoom.transform(selection, function)
{
            return constrain(this.__zoom.trasnlate
(
            x = = = “function” ? x.apply(this.argument) : x,
            y = = = “function” ? y.apply(this.argument) : y
);
}
};

zoom.scaleBy(selection, k)

It is applied to perform the scaling of the element’s zoom transform to k. Here, k represents the factor of scaling, define the function or number that returns the numbers as an output.

It is shown in the below mentioned script.

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

zoom.scaleTo(selection, k)

It is applied to perform the scaling of the element’s zoom transform to k. Here, k denotes the factor of scaling.

It is shown in the below mentioned script.

zoom.scaleTo = function(selection, k)
{
            zoom.transform(selection, function()
{
            var k0 = this.__zoom.k,
            k = = = “function” ? k.apply(this, arguments) : k;
});
};

zoom.wheelDelta([delta])

This function is applied to return the value of the ? (delta) function. If you don’t specify the value of this function, then this method returns the delta function’s existing wheel.

zoom.filter([filter])

This method allows you to fix the filter for the described function for zoom behavior. If you don’t determine the filter, then it will return you the existing filter. It is shown in the below script.  

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

zoom.scaleExtent([extent])

This method can be applied to set the extent scale over to an array numbers {k0, K1}.

Here,

            k0 = minimum scaled factor

            k1 = maximum scaled factor

If you don’t define any extent, then it returns the existing scale extent. Its default range is o to ?.

It is described in the below code.

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

zoom.extent([extent])

This method allows you to fix the extent of the declared array points. If you don’t describe the extent, then it returns the existing extent accessor with the range of {0, 0} {height, width}.

Here, the height of the client’s is the height, and the client’s width is the width.

It is explained in the below given script.

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

zoom.translateExtent([extent])

If you define the extent, then it will fix the translate extents to the defined points of the array. If you don’t define the extent, then it will return the existing translate extent, which by default contains the [[-?, -?], [+?, +?]].

zoom.duration([duration])

It can be applied to set the duration of the zoom transitions. These transitions are reinstating double-click and double-tap for the stated milliseconds, and it will give you the behavior of the zoom. If you don’t specify the duration, then it returns you the existing duration.

It is explained in the below code.

selection
            .call(zoom)
            .on(“dbclick.zoom”, null);

zoom.clickDistance([distance])

This method is used to set the highest distance, i.e., the zoomable sector may drive from up and down. Sometimes it also executes the subsequent click event.

zoom.on(typesnames[, listener])

This method can be applied to fix the event listener defined typename if you don’t specify any event listener. It returns the behavior of the zoom. A typename can be treated as the string containing the various typename separated by using whitespace. The typenames are similar to the zoom.one and zoom.second because it persue a name and a period (.). The typename facilitates you to use the various listeners. They may be.

Start

It can be used after starting the zooming like or the mousedown.

Zoom

It can be used if you have any modification into the zoom transformation or on the mousemove.  

End

It can be applied after the end of the zooming like or mouseup.

zoom.interpolate([interpolate])

You can use this method if you want to interpolate the zoom transitions over to the stated function. If you don’t define the interpolation, then it returns existing interpolation by default, which belongs to the d3.interpolateZoom.