D3: Is it possible to zoom+pan one axis and only pan the other?

Question

I have zoom and pan working for the x axis but I'd like to add panning for the y axis. I tried using d3.behavior.zoom and d3.event.translate[1] to get the y translation value and use that but the translate value changes when zooming happens so while click-dragging does pan the y axis, zooming also pans the y axis (in a non-intuitive way).

I also tried using two d3.behavior.zoom instances, one for the x axis and one for the y axis, but only the last one added is called on zoom events.

Here's an example that works for zoom and pan in the x direction that I'd also like to add y panning too (but not y zooming):

var x = d3.scale.linear()
  .domain([0, 800])
  .range([0, 800]);

var y = d3.scale.linear()
  .domain([0, 800])
  .range([0, 800]);

var rectangleSelector = d3.select('svg')
  .append('g')
  .selectAll('rect')
  .data([[0, 0], [50, 50], [100, 100]])
  .enter()
  .append('rect')
  .attr('fill', 'black')
  .attr('x', d => x(d[0]))
  .attr('y', d => y(d[1]))
  .attr('width', d => x(d[0] + 40) - x(d[0]))
  .attr('height', d => y(40));
  
d3.select('svg')
  .call(d3.behavior.zoom().x(x).on('zoom', () => {
    rectangleSelector
      .attr('x', d => x(d[0]))
      .attr('y', d => y(d[1]))
      .attr('width', d => x(d[0] + 40) - x(d[0]))
      .attr('height', d => y(40));
  }));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="800" height="800"></svg>

In this example I attempt to use the y value from d3.event.translate[1] and it works for dragging but the undesired behavior is that depending on where the user's mouse is zooming also changes the translate value for the y axis.

var x = d3.scale.linear()
  .domain([0, 800])
  .range([0, 800]);

var y = d3.scale.linear()
  .domain([0, 800])
  .range([0, 800]);

var rectangleSelector = d3.select('svg')
  .append('g')
  .selectAll('rect')
  .data([[0, 0], [50, 50], [100, 100]])
  .enter()
  .append('rect')
  .attr('fill', 'black')
  .attr('x', d => x(d[0]))
  .attr('y', d => y(d[1]))
  .attr('width', d => x(d[0] + 40) - x(d[0]))
  .attr('height', d => y(40));
  
d3.select('svg')
  .call(d3.behavior.zoom().x(x).on('zoom', () => {
    var translateY = d3.event.translate[1];
  
    rectangleSelector
      .attr('x', d => x(d[0]))
      .attr('y', d => y(d[1] + translateY))
      .attr('width', d => x(d[0] + 40) - x(d[0]))
      .attr('height', d => y(40));
    }));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="800" height="800"></svg>

Answer 1

D3v6 offers native access to independent zoom axes: https://observablehq.com/@d3/x-y-zoom

Answer 2

JSFIDDLE: https://jsfiddle.net/sladav/o8vaecyn/

For starters, the zoom behavior handles both pan and zoom for the x axis, and that's handled by...

var zoom = d3.behavior.zoom()
    .x(x)
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

So we'll use zoom to handle the x axis stuff.

FOR THE Y AXIS, to get JUST the pan behavior...

Create a separate drag behavior that captures the "dy", shifts the y domain, and reapplies it.

1. Add in a drag behavior

   var drag = d3.behavior.drag()
        .on("drag", dragging)
   

2. Let the y scale's domain be variable (we'll modify that as we drag)

   var yPan = 0;
   var yMin = (-height / 2);
   var yMax = (height / 2);
   
   var y = d3.scale.linear()
       .domain([yMin, yMax])
       .range([height, 0]);
   

3. Add a function to rescale the Y axis on the drag event

   function dragging(d) {
      yPan = d3.event.dy;
      yMin += yPan;
      yMax += yPan;
      y.domain([yMin, yMax])
      d3.select(".y.axis").call(yAxis)};
   

4. Call the drag function from your SVG element

   var svg = d3.select("body").append("svg")
       .attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom)
       .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
          .call(zoom)
          .call(drag);
   

Answer 3

I've figured out one way to do this but it feels like a gigantic hack:

var lastY = 0;

var zoom = d3.behavior.zoom().x(x);

zoom.on('zoom', () => {
  var translateY;

  if (d3.event.sourceEvent.type === 'mousemove') {
    // if it's a drag event then use the value from the drag
    translateY = d3.event.translate[1];
    lastY = translateY;
  } else {
    // if it's a wheel event then set the y translation to the last value
    translateY = lastY;
    zoom.translate([d3.event.translate[0], translateY]);
  }

  // translateY can now be used here as an offset to any drawing like so:
  rectangleSelector.attr('y', y(d[1] + translateY));
});

Answer 4

You can use

zoom.center

to get the code a bit cleaner, like this:

var lastY = 0;
var x = d3.scale.linear()
  .domain([0, 800])
  .range([0, 800]);

var y = d3.scale.linear()
  .domain([0, 800])
  .range([0, 800]);

var rectangleSelector = d3.select('svg')
  .append('g')
  .selectAll('rect')
  .data([[0, 0], [50, 50], [100, 100]])
  .enter()
  .append('rect')
  .attr('fill', 'black')
  .attr('x', d => x(d[0]))
  .attr('y', d => y(d[1]))
  .attr('width', d => x(d[0] + 40) - x(d[0]))
  .attr('height', d => y(40));
  
 var zoom = d3.behavior.zoom().center([400, 400]).x(x);
 zoom.on('zoom', () => {
     var translateY = d3.event.translate[1];
     zoom.center([400, translateY]);
     rectangleSelector.attr('x', d => x(d[0]))
                      .attr('y', d => y(d[1] + translateY))
                      .attr('width', d => x(d[0] + 40) - x(d[0]))
                      .attr('height', d => y(40));
});

d3.select('svg').call(zoom);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="800" height="800"></svg>