Question

modify this question again, because the solution does not work in the new version of the library d3 (3.0.3), so I come to ask for some help again would be very grateful.

Here is the new code with the library d3 (3.0.3):

https://gist.github.com/4495104
http://bl.ocks.org/4495104/e7a7589098140dff36df7ab2a824d71072bc3be4

According to what I’ve worked, the error should be in the line “491”.

// Reset the domain relative to the current zoom offsets.
    x.domain(x0.range().map(function(x) {
      return (x - translate[0]) / scale; 
    }).map(x0.invert));

We are changing the x.domain every second with setInterval, because we want to generate the appearance that the background is moving, but every time you run an event d3.behavior.zoom() (zoom or panning) the x.domain automatically switches to the initial values​​. In the next link you can review the problem.

http://jsfiddle.net/cristian540/Uy6bW/11/

Answer 1

If you change the scale’s domain programmatically, you need to reassign the scale to the zoom behaviour. This is because the zoom behaviour stores a clone of the scale internally for computing the new domain for new scale and translate offsets. So if you don’t reassign the scale, it continues to use the (old) cloned scale.

I’ve updated the documentation to include a note about this.

There is an additional complication, which is that the zoom’s x- and y-scales should represent the domains at zoom scale=1. So you actually need to keep your own clone of the current scale(s) at zoom scale=1 and apply the offset to both the clones and the current scales.

Then, you may also need to invert the current zoom translate and scale, depending on the exact behaviour that you need.

So it should look something like:

var x0 = d3.scale.linear().domain(…).range(…), // initial scale
    x = x0.copy(); // copy to use for axes and zoom behaviour

setInterval(function() {
  var translate = zoom.translate(),
      scale = zoom.scale(),
      xd = x0.domain(),
      dx = 1;

  // Set a new x-domain: offset by dx.
  x0.domain([xd[0] += dx, xd[1] += dx]);

  // Set the zoom x-domain (this resets the domain at zoom scale=1).
  zoom.x(x.domain(xd));

  // Reset the domain relative to the current zoom offsets.
  x.domain(x0.range().map(function(x) {
    return (x - translate[0]) / scale;
  }).map(x0.invert));
}, 1e3);

Example of this in action.