jquery-svgpan icon indicating copy to clipboard operation
jquery-svgpan copied to clipboard

Transform matrix to bounding box

Open Dillie-O opened this issue 12 years ago • 4 comments

Greetings again,

I was hoping you might be able to help me with this, since so far I've come up blank.

The library is working perfect for me to zoom and pan. I can zoom to a particular path (I'm doing a nest State/County map like the d3 chloropleth example) without a problem.

What I'm trying to do is add some click functionality to immediately update the viewport to a particular path that I've created. I can easily get the bounding box for it, but the centroid calculations seem to be off (see my question here: http://stackoverflow.com/questions/12467504/how-do-i-get-my-d3-map-to-zoom-to-a-location/12499290#12499290). As a temporary solution I've simply zoomed to the state, recorded the viewport matrix, and recalled it later.

However, I need to do some more fine tuned zooms and it would take too long (and be dirty) to record all the matrix values, and I can't seem to get a give on how the algebra works.

If I provide a bounding box (starting x, y, width, height) do you know the proper function to apply to have the viewport transform to zoom to within the dimensions of the bounding box?

Many thanks either way.

[:: Sean ::]

Dillie-O avatar Sep 26 '12 20:09 Dillie-O

I have a similar need but I'm interested in panning/zooming to an x,y point with a defined zoom factor and duration that the animation to get there will take: panTo (107,202,1.4,4000) (go to 107,202, animate zoom from current value to 1.4, animate this over 4000ms) Would also be great to be able to give it a named SVG element and have it do the bounding box, x, y calculations itself)

kenc3dan avatar Mar 13 '13 19:03 kenc3dan

@kenc3dan those would be nice features. Unfortunately, I'm not quite sure how that could be cleanly integrated with the current API. Since svgPan is initialized with the call svgPan([init args]), I don't see an obvious way to catch additional methods without breaking backwards compatibility. Thoughts?

talos avatar Mar 14 '13 00:03 talos

I wonder if it would be possible to create a custom "panTo" event, containing all the x,y,scale,time values, that could be fired by the parent Javascript and then caught and handled by the library. Other than that, is there some way to create a global function in the library that can be called from outside?

On Wed, Mar 13, 2013 at 8:09 PM, john krauss [email protected]:

@kenc3dan https://github.com/kenc3dan those would be nice features. Unfortunately, I'm not quite sure how that could be cleanly integrated with the current API. Since svgPan is initialized with the call svgPan([init args]), I don't see an obvious way to catch additional methods without breaking backwards compatibility. Thoughts?

— Reply to this email directly or view it on GitHubhttps://github.com/talos/jquery-svgpan/issues/12#issuecomment-14876818 .

kenc3dan avatar Mar 14 '13 20:03 kenc3dan

Hmm, yes, triggering an event could be one way around this. There's a traditional jQuery practice for defining methods, but the way that the initialization has been set up in jquery-svgpan excludes it. Would you want to take a crack at coding up a panTo event?

talos avatar Mar 14 '13 22:03 talos