D3:将鼠标滚轮重新映射为平移手势,而不是缩放手势
D3: remap mousewheel to be panning gesture instead of zoom gesture
默认情况下,当您在D3中创建新的缩放行为时,它会映射鼠标滚轮来控制缩放级别。如果图表大于图表区域,也可以单击并拖动以平移图表。我想重新映射鼠标滚轮手势,改为在垂直轴上平移(鼠标滚轮向上平移,鼠标滚轮向下平移)。有人知道如何做到这一点吗?
好的,我们开始:根据Lars的评论,我们可以指定mousewheel事件的事件处理程序。如答案所示,我们首先将wheel.zoom
事件映射到自定义处理程序pan
selection.call(zoomer)
.on("wheel.zoom",pan) // handler function for mousewheel zoom
其次,我们需要定义平移手势,它基本上是x和/或y方向的translate
。
function pan() {
svg.attr("transform", "translate(" + [dx,dy] + ")");
}
我们还需要量化两个方向的移动,并将其与鼠标滚轮的移动联系起来。通过检查MouseWheel
事件的细节,我们发现了两个有用的属性deltaX和deltaY,指示鼠标滚轮在每个方向上移动了多少。
最后的pan
函数如下
function pan() {
current_translate = d3.transform(svg.attr("transform")).translate;
dx = d3.event.wheelDeltaX + current_translate[0];
dy = d3.event.wheelDeltaY + current_translate[1];
svg.attr("transform", "translate(" + [dx,dy] + ")");
d3.event.stopPropagation();
}
这是一个正在工作的fiddle和bl.ock,还修改了Mike的几何缩放示例。
跨浏览器支持:
浏览器之间的鼠标滚轮事件似乎有所不同。对于Safari和Firefox支持,您需要添加以下内容:
selection.call(zoomer)
.on("wheel.zoom",pan)
.on("mousewheel.zoom", pan)
.on("DOMMouseScroll.zoom", pan)
此外,对wheelDelta
的解释在Firefox中是相反的。wheelDelta
可以通过这个功能来固定
function crossWheelDelta()
// cross-browser wheel delta
var e = window.event || e; // old IE support
return Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
}
您还可以在使用d3.behavior.zoom()
创建的函数中拦截车轮事件。默认情况下,滚轮滚动和鼠标拖动都会触发"缩放"事件,因此一种潜在的策略是只等待缩放事件并在缩放功能中拦截滚轮事件。
例如,这里有一种同时使用滚轮滚动和鼠标拖动进行Y平移的方法:
var panYOnScrollAndDrag = d3.behavior.zoom()
.scaleExtent([1, 1]) // prevents wheel events (or anything) from changing the scale
.on("zoom", function() {
if (d3.event.sourceEvent.type === "wheel") {
// use the `d3.event.sourceEvent.deltaY` value to translate
// e.g., yTranslation += yTranslationDelta;
} else if (d3.event.sourceEvent.type === "mousemove") {
// use the normal d3.event.translate array to translate
// e.g., yTranslation = d3.event.translate[1];
}
container.attr("transform", "translate(0," + yTranslation + ")");
});
然后,您可以将这个函数抛出到相关的d3容器中,比如selection.call(panYOnScrollAndDrag)
,所有的逻辑都包含在这个函数中。
- 更改高贴图的缩放级别
- 在不阻止默认行为的情况下检测IE10中的缩放
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 缩放Raphael/SVG容器以适应所有内容
- 传单缩放控制位置错误
- 在不移动内部文本的情况下缩放元素的效果
- 调整缩放窗口高度提升缩放
- 计算CSS3缩放框在另一个框中的最高位置
- D3.JS向rect添加缩放和列表项
- 当我在节点上拖动鼠标时,我如何防止使用d3.ehavior.zoom().on(“缩放”,重绘)
- 将直流图表库中的折线图缩放限制为小时
- 为什么缩放按钮不会显示在照片擦除中
- 动态设置谷歌地图缩放
- 如何缩放像图像一样的元素
- 使用KineticJS变换(移动/缩放/旋转)形状
- 在手机上缩小/缩放滚动图像
- 将时间缩放添加到折线图(Chart.js)
- 当涉及css缩放时,如何获得页面上的点击位置
- 如何缩放地图框传单中的标记单击事件
- 自动缩放图像以匹配文本高度