Here is a quick and dirty demo to show how one could reuse the pan and zoom code for other types of layouts. This is in response to this inquiry from the d3 forum.
See the Pen cwbjo by Bill White (@billdwhite) on CodePen.
Here is a quick and dirty demo to show how one could reuse the pan and zoom code for other types of layouts. This is in response to this inquiry from the d3 forum.
See the Pen cwbjo by Bill White (@billdwhite) on CodePen.
Hi Bill,
Already thanked you via the D3 google group but wanted to thank you here as well.
I forked the example from CodePen and am now taking a crack at applying semantic zoom to it. This will be a killer combination to handily deal with large datasets.
Nivaldo
Glad it worked out for you 🙂
Hi Bill,
great demo! I was wondering, in your example, the positioning of some of the node/arcs seems off. Somehow the rotation/translation seems to go beyond 360 degrees, causing some overlap between various nodes/arcs. Do you have any idea what is causing this?
best, Herman
It seems to have something to do with the diameter used by the tree layout. If I change it from 400 to 350, the problem seems to go away but I thought 400 looked a little more readable.
I attempted to implement semantic zoom to deal with large datasets but experienced conflicts between the different zooms being applied. As you can see, geometric zoom does not help with large datasets, unless you specify a very large viewport which is not very practical.
Yep there are certainly some kinks to be worked out.
This looks awsome… Why is the zoomed area draggable beyond the minimap?
Lol, probably because it’s a demo rather than production code. You are correct that ideally it would not be dragable outside the usable area 🙂
Everything looks awesome but i am not able to reuse minimap for the org chart neither built within d3.js (http://jsfiddle.net/YMa2y/346/ ) nor for the jQuery-orgchart. jsfiddle is created for the d3.js orgchart but may be due to code complexity i have not been able to introduce minimap in to it. Please let me know how should i proceed.
Thanks
What about something like this:
See the Pen d3 Minimap Pan and Zoom by Bill White (@billdwhite) on CodePen.
Thank you very much bill. This is exactly I was looking for.
Pingback: Bill White's Blog | D3.js Mapping Meets Pan and Zoom Demo
Hi, Billi. This is looks awesome, and I have aniquestion. How do you enlarge the minimap area?Thanks