I recently built a network graph by using vis.js. Usually the network is too complex to look though by just looking at the whole picture. The user of my web page might need to zoom in.
Now I would like to make a small screenshot of the whole graph, and when user zoom in to a specific part of the graph, this small screenshot will show which region the user is looking at.
Any advice? I googled a lot but I didn't found anything.
Thanks.
This sounds somewhat straight-forward, so here's how I'd go about it:
- add the "map" element where you will show the thing (presumably it should hover above some lower corner of the graph area)
- add an ("where am I") element with, say, semi-transparent border and transparent background to show which part is shown now. The size of each border should be calced so that it covers the whole map. Or it can have ordinary borders and its position is to be calced
- learn how to fire the recalculation when the thing is zoomed or moved. You'll probably use graph event handlers, at least for the
zoom and dragging or dragEnd or may be release. Fire the same handler after rendering your graph to initiate the "map"
- find out how to make the "screenshot" of the whole thing (and decide what it the whole thing.. where to put the borders?) from the network canvas (may be render it again inside the element?), add it to the "map" element under the "where am I" element (via the event handler)
By the way, what are you looking for is usually called minimap and quick search gives this thread which may be of interest for you.