d3js用鼠标中键平移
[英]d3js panning with middle mouse button
问题描述
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. 
我最近将D3.js从v3升级到了v4，我注意到通过按鼠标中键的方式与使用左键的方式相同，我无法再四处移动。 By comparing mbostock's older and newer blocks, the same thing seems to occur. 通过比较mbostock的旧块和新块，似乎发生了相同的事情。
Compare Programmatic Pan+Zoom II v3 to Pan & Zoom Axes v4 . 比较程序化Pan + Zoom II v3和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. 尽管它们的代码和功能非常相似，但使用鼠标的中间按钮只能在v3上使用，而不能在另一个上使用。
Does anyone know if it's still possible to pan using the mouse's middle button on the new version? 有谁知道是否仍然可以使用新版本上的鼠标中键进行平移？
1 个解决方案
解决方案1
3 已采纳 2016-08-10 19:39:41
Check out the docs on zoom.filter . 查看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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.