d3 set default zoom configuration different from ZoomIdentity

Question

like explained here: enter link description here I've added the zoom behavior to my chart.

D3 start the ZoomTransform to K=1, X=0, Y=0.

Is it possible to override those K, X, Y? For example says that the current state of chart (with its axis and scale) is not K=1,x=0,y=0, but it's something like k=0.012, x= 12, y= -18 ?

Answer 1

You can set the transform attribute of the SVG element in question as follows:

svg.attr('transform', 'translate(12, -18) scale(0.012)');

This could be either on initialisation of the visualisation, or in the handler for an event such as the click of a reset button.

It's important to note that this is how the zoom effect is being applied in your example. The result of d3.event.transform.toString() would be something like:

translate(100, 100) scale(2)

and the result of d3.zoomIdentity.toString() is:

translate(0, 0) scale(1)

In other words, you get a correctly formatted argument for an SVG element's transform attribute, which when applied using:

mySvgElement.attr('transform', d3.event.transform);

zooms, or pans the element.