2

I want to achieve panning the svg objects along both x and y axis and semantic zooming only along x axis.

As long as the d3.event.transform object holds the computed values for both zooming and panning, anytime I call panning and zooming one after each other, the newly translated y values are wrong because they ignore\do not ignore previous opposite actions. (zoom ignores the d3.event.transform.y of pan actions and pan does not ignore d3.event.transform.y of zoom actions)

If you zoom anywhere in the svg area, the circles should only translate the x coordinate and the y coordinate should stay the same as before (taking into account previous pannings)

Now the circles are "jumping" due to wrong y values.

if (isZoom)
{//zoom     
    return "translate(" + t.apply(d)[0] + "," + (d[1]) +")"; //ignores previous panning-only values and positions to static initial value
}   

//panning
return "translate(" + t.apply(d)[0] + "," + (t.y + d[1]) +")"; //how to ignore portion of t.y belonging to previous zooming?

You can uncomment this line of code to prevent circles from jumping but the y is changing while zooming (which should not)

//ignore isZoom and apply both for panning and zooming
return "translate(" + t.apply(d)[0] + "," + (t.y + d[1]) +")";

https://jsfiddle.net/197cz2vj/

Thanks!

UPDATE

Finally I came up with a hack-like solution. I do not like it and I am still looking for a proper solution(I don't like deciding the isZoom action and also the deltaPanY solution. It is all succeptible for future changes in d3 libray). Here it is:

Every time the transformation changes and the change is triggered by the mousemove(panning), update the deltaPanY variable comparing the new value with the old remembered value of the transformation. (I make a copy also of the t.x and t.k but for my purposes only t.y and deltaPanY is necessary).

function copyLastTransform(t)
{
    lastTransform = 
    {
        x: t.x,
        y: t.y,
        k: t.k
    };
};

Every time the transform occurs, set the delta variables and store the last transform:

if (isZoom)
{
   deltaZoomY += t.y - lastTransform.y;
}
else
{
   deltaPanY += t.y - lastTransform.y;
}

copyLastTransform(t);

Translate function looks like this now:

return "translate(" + t.apply(d)[0] + "," + (deltaPanY + d[1]) +")";

Forked fiddle: https://jsfiddle.net/xpr364uo/

mattti
  • 121
  • 4

0 Answers0