在d3中设定特定的缩放等级？

Question

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?

Answer 1

You can change your zoom event listener to interject the event and adjust the scale as you like (eg 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.