d3js panning with middle mouse button
Question
I've recently upgraded D3.js from v3 to v4 and I've noticed that I can no longer pan around by pressing the mouse's middle button in the same way as using the left button. By comparing mbostock's older and newer blocks, the same thing seems to occur.
Compare Programmatic Pan+Zoom II v3 to Pan & Zoom Axes v4 . Even though their code and functionality is very similar, using the mouse's middle button works on the v3 one but not on the other one.
Does anyone know if it's still possible to pan using the mouse's middle button on the new version?
1 answers
solution1
3 ACCPTED 2016-08-10 19:39:41
Check out the docs on zoom.filter . A little confusing but this is what's suppressing the secondary buttons.
Something like:
.filter(function(){
return (event.button === 0 ||
event.button === 1);
})
would allow zooming/panning with left and middle buttons.
<!DOCTYPE html> <meta charset="utf-8"> <style> .axis path { display: none; } .axis line { stroke-opacity: 0.3; shape-rendering: crispEdges; } .zoom { fill: none; pointer-events: all; } .view { fill: url(#gradient); stroke: #000; } </style> <svg width="960" height="500"> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0.0%" stop-color="#2c7bb6"></stop> <stop offset="12.5%" stop-color="#00a6ca"></stop> <stop offset="25.0%" stop-color="#00ccbc"></stop> <stop offset="37.5%" stop-color="#90eb9d"></stop> <stop offset="50.0%" stop-color="#ffff8c"></stop> <stop offset="62.5%" stop-color="#f9d057"></stop> <stop offset="75.0%" stop-color="#f29e2e"></stop> <stop offset="87.5%" stop-color="#e76818"></stop> <stop offset="100.0%" stop-color="#d7191c"></stop> </linearGradient> </defs> </svg> <script src="//d3js.org/d3.v4.min.js"></script> <script> var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); var x = d3.scaleLinear() .domain([-1, width + 1]) .range([-1, width + 1]); var y = d3.scaleLinear() .domain([-1, height + 1]) .range([-1, height + 1]); var xAxis = d3.axisBottom(x) .ticks((width + 2) / (height + 2) * 10) .tickSize(height) .tickPadding(8 - height); var yAxis = d3.axisRight(y) .ticks(10) .tickSize(width) .tickPadding(8 - width); var view = svg.append("rect") .attr("class", "view") .attr("x", 0.5) .attr("y", 0.5) .attr("width", width - 1) .attr("height", height - 1); var gX = svg.append("g") .attr("class", "axis axis--x") .call(xAxis); var gY = svg.append("g") .attr("class", "axis axis--y") .call(yAxis); var zoom = d3.zoom() .scaleExtent([1, 40]) .translateExtent([ [-100, -100], [width + 90, height + 100] ]) .on("zoom", zoomed) .filter(function(){ return (event.button === 0 || event.button === 1); }) svg.append("rect") .attr("class", "zoom") .attr("width", width) .attr("height", height) .call(zoom); function zoomed() { view.attr("transform", d3.event.transform); gX.call(xAxis.scale(d3.event.transform.rescaleX(x))); gY.call(yAxis.scale(d3.event.transform.rescaleY(y))); } </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.