limit panning / zooming in D3 v4

[Miguel Pignatelli]

I know this has been asked many times in the past and I thought this was easier to achieve in v4, but I'm not able to figure out how to limit panning/zooming to a given set of (user) coordinates.

For example, I'm trying to apply limits to this example: http://bl.ocks.org/feyderm/03602b83146d69b1b6993e5f98123175

Here is the jsfiddle I'm working on:

https://jsfiddle.net/bfeg87ux/4/

I'm trying to limit panning/zooming to, say, [0, 1000] in the axis coordinates.

I thought that using translateExtent (https://github.com/d3/d3-zoom/blob/master/README.md#zoom_translateExtent) I would be able to achieve this, but I may be missing something.

Does anyone know an example of how to do this?

Thanks,

[Mike Bostock]

This seems to work:

d3.zoom()

    .scaleExtent([1, 2])

    .translateExtent([[0, 0], [svg_dx, svg_dy]])

    .on("zoom", zoom)

You could instead set the zoom.extent to the inner chart area rather than covering the entire SVG element, which is the default behavior. (The zoom behavior doesn’t know anything about the margins of your chart—it just knows you want a zoomable element.) Then, set the zoom.translateExtent to the same value:

d3.zoom()

    .scaleExtent([1, 2])

    .extent([[margin.left, margin.top], [svg_dx - margin.right, svg_dy - margin.bottom]])

    .translateExtent([[margin.left, margin.top], [svg_dx - margin.right, svg_dy - margin.bottom]])

    .on("zoom", zoom)

Setting the extent and the translate extent to the same value, along with setting the minimum scale to 1, disallows zooming and panning outside of the initial unzoomed view.

Mike

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Miguel Pignatelli]

Thanks Mike, that is useful.

In my real case I have to be able to zoom in from the initial state to
get details on the view (ie, the minimum scale can't be 1) and my min
and max coordinates are not the same as the initial state (for example,
in the initial state I have coordinates [100,500] but want to limit
panning/zooming to [0,1000] -- all in user coordinates).

Is there a way to achieve this? Any example I can take a look at?

Thanks again,

M;

On 06/04/2017 18:15, Mike Bostock wrote:
> This seems to work:
>
> d3.zoom()
> .scaleExtent([1, 2])
> .translateExtent([[0, 0], [svg_dx, svg_dy]])
> .on("zoom", zoom)
>

> You could instead set the /zoom/.extent
> <https://github.com/d3/d3-zoom/blob/master/README.md#zoom_extent> to the

> inner chart area rather than covering the entire SVG element, which is
> the default behavior. (The zoom behavior doesn’t know anything about the
> margins of your chart—it just knows you want a zoomable element.) Then,

> set the /zoom/.translateExtent to the same value:

> <mailto:d3-js+un...@googlegroups.com>.

> For more options, visit https://groups.google.com/d/optout.
>

> --
> You received this message because you are subscribed to the Google
> Groups "d3-js" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to d3-js+un...@googlegroups.com

> <mailto:d3-js+un...@googlegroups.com>.

[Mike Bostock]

That shouldn’t be a problem. You can use zoom.transform to change the initial view. -M

To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.

[Miguel Pignatelli]

Ah! ok. Set the extent to the max coordinates and then transform to the
current view. I'll try that.

Thanks again!
M;


On 06/04/2017 18:55, Mike Bostock wrote:
> That shouldn’t be a problem. You can use /zoom/.transform
> <https://github.com/d3/d3-zoom/blob/master/README.md#zoom_transform> to

> > <mailto:eme...@gmail.com <mailto:eme...@gmail.com>>> wrote:
> >
> > I know this has been asked many times in the past and I
> thought this
> > was easier to achieve in v4, but I'm not able to figure out how to
> > limit panning/zooming to a given set of (user) coordinates.
> >
> > For example, I'm trying to apply limits to this
> > example:
> http://bl.ocks.org/feyderm/03602b83146d69b1b6993e5f98123175
> >
> > Here is the jsfiddle I'm working on:
> > https://jsfiddle.net/bfeg87ux/4/
> >
> > I'm trying to limit panning/zooming to, say, [0, 1000] in the axis
> > coordinates.
> > I thought that using translateExtent
> >
> (https://github.com/d3/d3-zoom/blob/master/README.md#zoom_translateExtent)
> > I would be able to achieve this, but I may be missing something.
> >
> > Does anyone know an example of how to do this?
> >
> > Thanks,
> >
> > --
> > You received this message because you are subscribed to the Google
> > Groups "d3-js" group.
> > To unsubscribe from this group and stop receiving emails from it,
> > send an email to d3-js+un...@googlegroups.com

> <mailto:d3-js%2Bunsu...@googlegroups.com>
> > <mailto:d3-js+un...@googlegroups.com
> <mailto:d3-js%2Bunsu...@googlegroups.com>>.

> > For more options, visit https://groups.google.com/d/optout.
> >
> > --
> > You received this message because you are subscribed to the Google
> > Groups "d3-js" group.
> > To unsubscribe from this group and stop receiving emails from it, send
> > an email to d3-js+un...@googlegroups.com

> <mailto:d3-js%2Bunsu...@googlegroups.com>
> > <mailto:d3-js+un...@googlegroups.com
> <mailto:d3-js%2Bunsu...@googlegroups.com>>.

> > For more options, visit https://groups.google.com/d/optout.
>
> --
> You received this message because you are subscribed to the Google
> Groups "d3-js" group.
> To unsubscribe from this group and stop receiving emails from it,
> send an email to d3-js+un...@googlegroups.com

> <mailto:d3-js%2Bunsu...@googlegroups.com>.

[Miguel Pignatelli]

Just for reference, here is a working example:

https://bl.ocks.org/emepyc/7218bc9ea76951d6a78b0c7942e07a00

M;


On 06/04/2017 18:55, Mike Bostock wrote:

> That shouldn’t be a problem. You can use /zoom/.transform
> <https://github.com/d3/d3-zoom/blob/master/README.md#zoom_transform> to

> > <mailto:eme...@gmail.com <mailto:eme...@gmail.com>>> wrote:
> >
> > I know this has been asked many times in the past and I
> thought this
> > was easier to achieve in v4, but I'm not able to figure out how to
> > limit panning/zooming to a given set of (user) coordinates.
> >
> > For example, I'm trying to apply limits to this
> > example:
> http://bl.ocks.org/feyderm/03602b83146d69b1b6993e5f98123175
> >
> > Here is the jsfiddle I'm working on:
> > https://jsfiddle.net/bfeg87ux/4/
> >
> > I'm trying to limit panning/zooming to, say, [0, 1000] in the axis
> > coordinates.
> > I thought that using translateExtent
> >
> (https://github.com/d3/d3-zoom/blob/master/README.md#zoom_translateExtent)
> > I would be able to achieve this, but I may be missing something.
> >
> > Does anyone know an example of how to do this?
> >
> > Thanks,
> >
> > --
> > You received this message because you are subscribed to the Google
> > Groups "d3-js" group.
> > To unsubscribe from this group and stop receiving emails from it,
> > send an email to d3-js+un...@googlegroups.com

> <mailto:d3-js%2Bunsu...@googlegroups.com>
> > <mailto:d3-js+un...@googlegroups.com
> <mailto:d3-js%2Bunsu...@googlegroups.com>>.

> > For more options, visit https://groups.google.com/d/optout.
> >
> > --
> > You received this message because you are subscribed to the Google
> > Groups "d3-js" group.
> > To unsubscribe from this group and stop receiving emails from it, send
> > an email to d3-js+un...@googlegroups.com

> <mailto:d3-js%2Bunsu...@googlegroups.com>
> > <mailto:d3-js+un...@googlegroups.com
> <mailto:d3-js%2Bunsu...@googlegroups.com>>.

> > For more options, visit https://groups.google.com/d/optout.
>
> --
> You received this message because you are subscribed to the Google
> Groups "d3-js" group.
> To unsubscribe from this group and stop receiving emails from it,
> send an email to d3-js+un...@googlegroups.com

> <mailto:d3-js%2Bunsu...@googlegroups.com>.