{"id":795,"date":"2013-11-26T20:21:33","date_gmt":"2013-11-27T01:21:33","guid":{"rendered":"http:\/\/billdwhite.com\/?p=795"},"modified":"2013-11-26T20:21:33","modified_gmt":"2013-11-27T01:21:33","slug":"d3-minimap-pan-and-zoom-demo","status":"publish","type":"post","link":"https:\/\/billdwhite.com\/wordpress\/2013\/11\/26\/d3-minimap-pan-and-zoom-demo\/","title":{"rendered":"d3 Minimap Pan and Zoom Demo"},"content":{"rendered":"

I put together a little demo to show how to setup a canvas with a corresponding minimap that displays an overview of the contents of the canvas. You can use the mousewheel on either the main canvas or the minimap to zoom in and out. You can also drag either the image or the minimap frame to pan around. Notice how these actions (pan\/zoom) from the canvas update the minimap and vice versa. I wrote the demo in the reusable coding style put forth in Bostock’s Towards Reusable Charts<\/a>. The trickiest part was preventing the two different pan\/zoom handlers (the canvas and the minimap) from getting out of sync with respect to setting the scale and transform values. Prior to getting that worked out, I kept hitting the common problem of trying to use multiple pan\/zoom controls to operate against a single zoom behavior (discussed here<\/a>, here<\/a> and here<\/a>). I managed to work it out by updating the transform and scale values on both controls at the correct time and place. If you have any suggestions for improvements, I’d love to hear them.<\/p>\n

See the Pen d3 Minimap Pan and Zoom Demo<\/a> by Bill White (@billdwhite<\/a>) on CodePen<\/a><\/p>\n