| license: gpl-3.0 |
This example demonstrate how to remap D3 events. MouseWheel event is used to pan the chart in x and y directions. This example was created as an answer to this SO question (Refer to it for detailed explanation).
NOTE: Based on Ahmed Mohamed's D3.js: Panning with mouse wheel (v3)
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>D3.js v4: Panning with mouse wheel</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.2/d3.min.js"></script> | |
| <style> | |
| .overlay { | |
| fill: none; | |
| pointer-events: all; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| 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) // disables default zoom wheel behavior | |
| .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 + ")"; }); | |
| function zoom() { | |
| g.attr("transform", d3.event.transform); | |
| } | |
| function pan() { | |
| zoomer.translateBy(svg.transition().duration(100), d3.event.wheelDeltaX, d3.event.wheelDeltaY); | |
| } | |
| </script> | |
| </body> | |
| </html> |
