¿De dónde viene la función de zoom en d3v4?

Where does the zoomed function in d3v4 come from?

Because in the zoomed function we obtain a transform from d3.event.transform. In previous versions of D3, this would come from the zoom behavior itself ( zoom.translate and zoom.scale ). In v4, it comes from the element on which the zoom behavior is called ( gMain ).

The zoom.scaleTo () function in D3.js is used to scale the current zoon transform of the selected elements to k.

In v4, it comes from the element on which the zoom behavior is called ( gMain ). To programmatically zoom in and then apply the zoom behavior starting from there, we need to set the zoom transform of the gMain element before we call the behavior: Now we start with an already zoomed in view and can zoom in and out using the mouse.

The major difference between zooming in D3v3 and and D3v4 is that the behavior (dealing with events) and the transforms (positioning elements) are more separated.

d3-zoom Panning and zooming are popular interaction techniques which let the user focus on a region of interest by restricting the view. It is easy to learn due to direct manipulation: click-and-drag to pan (translate), spin the wheel to zoom (scale), or use touch.

If selection is a selection, translates the current zoom transform of the selected elements by x and y, such that the new tx1 = tx0 + kx and ty1 = ty0 + ky. If selection is a transition, defines a “zoom” tween translating the current transform. This method is a convenience method for zoom .transform.

Brush the chart to zoom. Double click to re-initialize. Start by understanding how to build a basic line chart, and how brushing works in d3.js. A class line is added to the line. It allows to select this class later on to update the line position. It is possible to react to double click thanks to the on (“dblclick”,…) function.

The chart employs conventional margins and a number of D3 features: Released under the GNU General Public License, version 3 .

Select a zone to zoom on it (X axis only). Double click to unzoom. A clipPath is used to avoid displaying the circle outside the chart area. all (brush.move, null) is used to dismiss the grey brushing area once the selection has been done.

All that’s necessary for panning and zooming is a translation [tx, ty] and a scale factor k. When a zoom transform is applied to an element at position [x0, y0], its new position becomes [tx + k × x0, ty + k × y0].

d3.js has everything to do it with only a few lines of code. You just need to create a g element as first child of the SVG element and connect d3.behavior.zoom() behavior. That’s it! Now you can add all SVG node to that g view port element. For d3v4 it’s even simpler, no more d3.behavior.zoom() behavior.