Question

I have implemented a simple D3.js line chart that can be zoomed and panned. It is based on Stephen Bannasch’s excellent example here.

The domain of my data is [0, n] in the x dimension.

How can I limit zooming and panning to this domain using the built-in zoom behavior (i.e. using mousewheel events)?

I want to prevent users from panning past 0 on the lower end or n on the upper end, for example they should never be able to see negative values on the x-axis, and want to limit zooming to the same window.

The examples that I found based on Jason Davies work using extent( […],[…],[…] ) seem to no longer work in version 2.9.1. Unfortunately, the zoom behavior is currently one of the few features not documented in the otherwise outstanding API documentation.

Any pointers are welcome.

PS. I have posted the same question on the D3.js mailing list but did not get a response: https://groups.google.com/d/topic/d3-js/w6LrHLF2CYc/discussion. Apologies for the cross-posting.

Answer 1

You just need to limit the domain on redraw. The following code will prevent the graph from being zoomed out past it’s initial domains (as used in http://bl.ocks.org/1182434).

SimpleGraph.prototype.redraw = function() {
  var self = this;
  return function() {

    self.x.domain([Math.max(self.x.domain()[0], self.options.xmin), Math.min(self.x.domain()[1], self.options.xmax)]);

    self.y.domain([Math.max(self.y.domain()[0], self.options.ymin), Math.min(self.y.domain()[1], self.options.ymax)]);

    ....