This is the 18th day of my participation in the First Challenge 2022

See the Data Visualization column for a series of articles

Perform scaling

The zoomer is also an object that calls the corresponding method to perform the zooming operation:

  • Zoom.transform (selection, transform[, point]) transforms (zooming and panning) the first argument to Selection can be either a selection set or a transition object.

    • If it is a selection set, the current transform attribute style of the element in the selection set is set to the second parametertransformAnd throw them in orderstart,zoom,endZoom related events
    • Is called if it is a transition objectd3.interpolateZoommethodsThe interpolator is used to calculate a series of values for the transform attribute styles during the transition. And distributed at the beginning of the transitionstartEvents are distributed during each frame of the transitionzoomEvents, distributed at the end of the transition (or interruption)endEvents. The transition effect tries to minimize the visual sensation of panning around the specified point (specified by the third (optional) argument, which defaults to the midpoint of the view)

    The second parameter transform is a value that represents the (D3 format) zoom transform, the zoom Transform.

    💡 can also be a function that returns the value of the scale transformation, which is called in turn by the elements of the selection set, passing two arguments in turn:

    • eventCurrent zoom event
    • dThe data bound to the currently traversed element, datum

    The this inside the function refers to the element node being traversed

    The third (optional) argument, point, is a reference point for the panning and scaling transition, and can be an array of coordinate points [x, y]. It can also be a function that returns an array, which is called in turn by the elements of the selection set, passing two arguments in turn.

    // This method is usually called with selection.call() to set the scaling transform
// The selection set is passed to the method as the first argument
// d3.zoomIdentity is a scale transformation value that represents the initial state
selection.call(zoom.transform, d3.zoomIdentity);
// The above example is used to "reset" the panning and scaling of elements in the view

// This method can also be called with transition.call() to set the scaling transform, which uses a transition animation
selection.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
Copy the code

The above method is based on a new zoom transform value, zoom Transform, and is not affected by zoom limits zoom.scaleextent ([extent]) and zoom.translateextent ([extent]). If you want to make further transformations based on existing transformations and consider zoom constraints, you can use zoom.translateby (), zoom.translateto (), zoom.scaleby (), or zoom.scaleto () methods. Think of them as a handy way of zoom.transform().

  • Zoom.translateby (Selection, x, y) further translates the elements of the selection set based on the current transformation, that is, the relative transformation is performed.

    💡 The new transformation value can be calculated from the original change value: Tx1 = TX0 + KxT_ {x1}= T_ {x0}+ kxTX1 = TX0 +kx, TY1 = TY0 + KYT_ {y1}= T_ {y0}+kyty1= TY0 + KY (tx0T_ {x0} TX0 and TY0t_ {y0}ty0 is the current/original transformation value, While XXX and YYy are the increment of translation transformation relative to the original value, KKK is the scale transformation ratio)

    The first argument, Selection, can be either a selection set or a transition object. The transformation operation is performed on the elements.

    The second and third parameters, x and y, are the incremental values of the translation transformation relative to the current coordinate (the original transformation)

    💡 The second and third arguments x and y can also be a function that returns the shift increment value, which is called in turn by the elements in the selected set, passing two arguments:

    • dThe data bound to the currently traversed element, datum
    • iIndex of the currently traversed element in the group

    The this inside the function refers to the element node being traversed

  • Zoom.translateto (Selection, x, y[, P]) translates the element of the selection set. The direction and distance of the transformation are based on the translation of the point [x, y] to the given point P

    💡 transformation is based on two reference points: tx=px−kxt_{x}=p_{x}-kxtx=px−kx, ty=py−kyt_{y}=p_{y}-kyty=py−ky (where pxp_{x}px and pyp_{y}py are the horizontal and vertical coordinates of the reference point P, respectively)

    The first argument, Selection, can be either a selection set or a transition object. The transformation operation is performed on the elements.

    The second and third arguments x and y are the coordinate positions that require a point

    The fourth (optional) argument, p, is the reference point to which the transformation is required to move point [x, y]. Point P is the midpoint of the view by default

    💡 The second, third, and fourth arguments x, y, and p can also be a function that returns the coordinate position of a point, which is called in turn by the elements in the selected set, also passing two arguments.

  • Zoom.scaleby (Selection, k[, p]) scales the elements of the selection set based on the current transformation

    💡 View the new scale is calculated based on the original scale: k1= K0KK_ {1}= K_ {0} KK1 = K0K (where k0k_{0}k0 is the original scale)

    The first argument, Selection, can be either a selection set or a transition object. The transformation operation is performed on the elements.

    The second argument, k, is a multiple of the scaling

    The third (optional) parameter p is the reference point for building a smooth zoom transition, which defaults to the midpoint of the view and moves during the zoom

    💡 the second and third arguments k and p can also be a function that returns the corresponding values, which are called in turn by the elements in the selected set, and also pass the two arguments.

  • Zoom.scaleto (selection, k[, p]) scales the elements of the selection set and sets the scaleTo k

    💡 view’s new scale is the parameter passed in: k1=kk_{1}=kk1= K

    The first argument, Selection, can be either a selection set or a transition object. The transformation operation is performed on the elements.

    The third (optional) parameter p is the reference point for building smooth scaling transitions, which defaults to the midpoint of the view and does not move during scaling

    💡 the second and third arguments k and p can also be a function that returns the corresponding values, which are called in turn by the elements in the selected set, and also pass the two arguments.

If a transition animation is used when zooming, the zoomer provides a method to set the parameters of the transition animation:

  • Zoom. duration([duration]) Sets the duration of transition animation for zooming triggered by double clicking (mouse double clicking or double-tap on touch screen device). The duration argument is a number indicating the duration of the transition animation in milliseconds. If a non-positive number is passed, scaling takes effect immediately without smooth dynamic effects. The default is 250

    💡 If you want to disable double click amplification, you can set the callback function for the dbclick double click event (which has the name zoom) to null

    selection
  .call(zoom) // After setting the zoom listener for the elements of the selection set, unlisten for the double-click zoom event
  .on("dblclick.zoom".null);
Copy the code

  • Zoom.interpolate ([interpolate]) Sets the interpolator for zoom.interpolate transition animation. Interpolate parameter interpolate is a function that returns an interpolator (also known as interpolation factory function). The default value is the built-in interpolator D3.interpolateZoom for a smooth transition effect

    💡 If you want to transition “linearly” between two views, you can try using D3’s other built-in interpolator, D3.interpolate

Handling zoom events

Use the zoom.on(typenames[, listener]) method to listen for the zoom event and perform the callback function.

The first parameter typenames is the zooming and panning event to listen for. D3 provides three brush related event types:

  • startThe event that is triggered at the beginning of a zoom, such as a mouse-down operation
  • zoomAn event that is triggered during zooming, such as a mouse movement operation
  • endThe event that is triggered at the end of a zoom, such as releasing a key action

💡 can add the name name after the event and separate it with a., such as zoom.on(‘zoom.foo’, listener), so that multiple different handlers can be added through a single brush event type

💡 If you want to remove listeners for zooming events, you can set the corresponding event callback function to NULL

zoom.on(".".null);
Copy the code

The second argument, listener, is an event handler that is called when the corresponding scale type event is triggered and receives two arguments in sequence:

  • Event Scales the event object, which exposes some properties about the current scaling information:

    • event.targetThe zoomer that currently fires the zoom event
    • event.typeThe type of the zoom event, which can bestart,zoom,end
    • event.transformThe current scale value is used to set the CSS of the container/elementtransformStyle property to achieve the movement of screen elements in scale
    • event.sourceEventThe original event that triggers scaling, as inmousemove 或 touchmove

  • D The data datum bound to the element currently calling the zoomer

The this inside the callback refers to the current element