D3 Graph With Limited Zoom

I have implemented a d3 line graph which reads data from a CSV file, and then plots multiple lines which react to mouseover events. It works fine with pan and zoom using the follow

Solution 1:

Thanks for the help, I did it by the following code in the end:

var t = zoom.translate(),
s = zoom.scale();

tx = Math.min(0, Math.max(width * (1- s), t[0]));
ty = Math.min(0, Math.max(height * (1- s), t[1]));

zoom.translate([tx, ty]);

The difficulty was in bounding the graph at various zoom levels, which this now solves. The d3.event.translate and d3.event.scale statements were also unnecessary, and should have been removed.

Solution 2:

You can simply check the value manually and reset it if it is too high:

if(tx > threshold) { tx = threshold; }

Also, the statements

d3.event.translate;
d3.event.scale;

in your code have no effect.