d3 graph with limited zoom

Question

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

Answer 1

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.

Answer 2

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.