Zoom Pan Scatter Frustration

[Matthew Vincent]

Forgive me, but I need help.

I can't seem to limit the boundaries on zoom and pan for a scatter plot in both x and y direction.  Limiting x is fine, Limiting y is fine, but I'm having issues combining the two when zooming.

http://jsfiddle.net/moosejaw/nUF6X/4/

http://stackoverflow.com/questions/16682227/d3-pan-zoom-overflow

Can anyone help?  Mike?

Thanks!

Matt

[Nacho Caballero]

The problem is that you are setting tickValues manually, instead of letting the x and y scale do it for you. Try commenting it out: // .tickValues(tickValues)

  var x = d3.scale.linear().rangeRound([0, width]).domain(d3.extent(tickValues));

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      // .tickValues(tickValues)
      .tickFormat(function(d) {
          var ret = bpToChrMBP(d);
          return ret.chr;
      });

You also don't need the make_x_axis function (same for y axis). Check out this zoomable scatterplot example: http://bl.ocks.org/ameliagreenhall/raw/d30a9ceb68f5b0fc903c/

--
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/groups/opt_out.
 
 

[Matt Vincent]

I'm not sure why you point to this example. This doesn't limit the panning at all. Also, I need to explicitly set the tick values as I need the chromosome names associated to those tick values displayed and not randomly chosen by the axis/tick mechanisms.

Matt

You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/hIyDg22KVpc/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.

[Nacho Caballero]

I misunderstood you, then. 

To prevent panning left/right past the cutoffs you would have to re-implement `d3.behavior.zoom()`. Right now there is a function called `mousemove` that calls `translateTo`, and this function doesn't have a limit:

    function translateTo(p, l) {

      l = point(l);

      translate[0] += p[0] - l[0];

      translate[1] += p[1] - l[1];

    }

A quick and dirty fix to allow setting tickValues explicitly could be to define a clippingPath for each axis.