Take the 2-minute tour ×

I have a line graph in d3, and we need to implement specific zoom levels, similar to Google maps. I want a mouse wheel zoom in action to snap/transition to the next possible inward zoom level, and a mouse wheel zoom out action to snap/transition to the next possible outward zoom level.

My setup for the zoom method is similar to everyone else's:

        self.plot.call(d3.behavior.zoom().x(self.x).y(self.y).on("zoom", self.redraw()));

But I don't know enough about d3 (nor do I have tons of time left...) to know how to set this. Any tips/help?

share|improve this question

1 Answer 1

You can change your zoom event listener to interject the event and adjust the scale as you like (e.g. round to the next integer). There's a blog post that explains a bit more here.

This is a bit more work than simply attaching the zoom behaviour to an axis, but d3 doesn't offer anything to restrict the zoom levels out of the box.

share|improve this answer

Your Answer


