d3js用鼠标中键平移

Question

我最近将D3.js从v3升级到了v4，我注意到通过按鼠标中键的方式与使用左键的方式相同，我无法再四处移动。 通过比较mbostock的旧块和新块，似乎发生了相同的事情。

比较程序化Pan + Zoom II v3和Pan＆Zoom Axes v4 。 尽管它们的代码和功能非常相似，但使用鼠标的中间按钮只能在v3上使用，而不能在另一个上使用。

有谁知道是否仍然可以使用新版本上的鼠标中键进行平移？

Answer 1

查看zoom.filter上的文档。 有点混乱，但这是抑制辅助按钮的原因。

就像是：

.filter(function(){
  return (event.button === 0 ||
          event.button === 1);
})

将允许使用左右按钮进行缩放/平移。

 <!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>

d3js用鼠标中键平移

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-08-10 19:39:41

d3js用鼠标中键平移

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-08-10 19:39:41

解决方案1
3 已采纳 2016-08-10 19:39:41