Skip to content Skip to sidebar Skip to footer
Home / D3.js / Javascript

D3 V4 Pan With Mouse Wheel

Post a Comment
How can I pan with the mouse wheel using d3.js version 4. I found this example using v3, but it does not work with v4. Example link

Solution 1:

I had the same need and I figured out the changes required in D3v4 (below). I also posted to Blocks here.

var width = 960,
    height = 500;

var randomX = d3.randomNormal(width / 2, 80),
    randomY = d3.randomNormal(height / 2, 80);

var data = d3.range(2000).map(function() {
  return [
    randomX(),
    randomY()
  ];
});

var zoomer = d3.zoom().scaleExtent([1 / 2, 4]).on("zoom", zoom)

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    
var g = svg.append("g");

svg.call(zoomer)
   .on("wheel.zoom", null)
   .on("wheel", pan);

g.append("rect")
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height);

g.selectAll("circle")
 .data(data)
 .enter().append("circle")
    .attr("r", 2.5)
    .attr("transform", function(d) { return"translate(" + d + ")"; });

functionzoom() {
  g.attr("transform", d3.event.transform);
}

functionpan() {
  zoomer.translateBy(svg.transition().duration(100), d3.event.wheelDeltaX, d3.event.wheelDeltaY);
}
.overlay {
  fill: none;
  pointer-events: all;
}
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.2/d3.min.js"></script><title>D3.js v4: Panning with mouse wheel</title><body></body>

You may like these posts

Post a Comment for "D3 V4 Pan With Mouse Wheel"