22

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>

7
  • d3.behavior.zoom() is chainable with x() and y(); I'm only specifying x() and so the zoom behavior only changes the x axis. But it still reports translate values for the y axis, which I'd like to use to translate that axis--the issue is that they're affected by zooming, not just panning.
    – Beau
    Feb 5, 2016 at 2:23
  • 1
    I'm in in the process of making a JSFiddle as well.
    – Beau
    Feb 5, 2016 at 2:23
  • Maybe this: bl.ocks.org/jgbos/9752277 Feb 5, 2016 at 2:45
  • @altocumulus that looks promising but there are multiple d3.behavior.zoom() instances there and they're each tied to a specific area of the screen--I tried two instances on the same area of the screen and only the last instance applied received events (though maybe two g elements with the same dimensions could each receive one?)
    – Beau
    Feb 5, 2016 at 2:52
  • @altocumulus so I tried creating two rect elements each the size of the canvas, making them fill: white and fill-opacity: 0 (so they're transparent) and attached a zoom behavior to each, and even with pointer-events: all only the last added d3.behavior.zoom() fires events.
    – Beau
    Feb 5, 2016 at 3:10

4 Answers 4

17
+50

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);
    
1
  • 5
    Could you please update the code for d3 v4? d3.behavior.zoom().x(...) is not valid anymore
    – Krimson
    Dec 26, 2018 at 3:00
3

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

2

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));
});
2

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>

2
  • the initial zoom still changes the vertical axis sometimes when I try this snippet
    – Beau
    Feb 16, 2016 at 3:16
  • Depends on what you set the initial center to. You could try to change the initial zoom on the Y axis to 50 (which in your case is the middle of the initial Y axis)
    – Doktorn
    Feb 16, 2016 at 8:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.