In D3.js, you can use the zoom() method to zoom in or zoom out the chart or graph that you have created. Up until now, D3 has released a stable library version 7 to use publicly. However, there is still some existing project that still uses D3 version 3, that is me 😆 I still use D3 v3.

In this short article, I want to explain the difference between zoom() and behavior.zoom().

• d3.zoom() method is a new API that is introduced in D3 version 4 and it is backward-compatible with D3 version 3. We can say that it's the simplified version of d3.behavior.zoom() of D3 v3. The differences are about its intuitive interface and less code with d3.zoom(). This new method allows you to create a zoom behavior using a single function call. And then it will return a new zoom behavior instance that you latter can add to any DOM element using the 'call()' method.

• d3.behavior.zoom() method is for creating zoom behaviors and is the original API of D3 version 3. It allows you to define the different types of zoom with its complex and powerful API. There are features like zooming along a specific axis or restricting the zoom area to a specific region of the SVG canvas. To use zoom() in D3 v3, first, you must create an instance using d3.behavior.zoom() constructor, and then add it to a DOM element using the same 'call()' method as in D3 v4.

So, the difference between zoom() and behavior.zoom() is about its respective version. When working with zoom, you can check the occurrence D3 version in project then you can choose which method to apply to your code.