CODEWITHSUNDEEP
javascriptd3.js
gipadm
gipadm

Reputation: 543

d3.js: pan with limits

I'm working on a basic linear chart with pan functionality.

I managed to limit the extent to which the chart elements can be dragged by limiting the d3.event.translate values:

var tx = Math.max(0, d3.event.translate[0]),
    ty = Math.min(0, d3.event.translate[1]);

All I need now is to limit the x and y axes accordingly. See the example: http://jsfiddle.net/Q2SWV/

The bars on the chart are limited by 0 when dragging down or to the left. The x and y axes aren't. Any ideas on how to fix the axis problem?

Upvotes: 5

Views: 3425

Answers (1)

mdml
mdml

Reputation: 22882

You're very close, but you're missing the final step of updating the zoom behavior with your updated translation coordinates. This will fix your problem since both axes are updated using the zoom. Add the following right after determining tx and ty:

zoom.translate([tx, ty]);

This will apply the limits to your axes. See updated fiddle here: http://jsfiddle.net/mdml/nZD3E/.

Upvotes: 5

Related Questions