d3.js - 使用 zoomIdentity 后 D3 缩放会中断鼠标滚轮缩放
问题描述
当我使用 d3-zoom 并使用 zoomIdentity 以编程方式调用 scaleTo 函数时,我无法再使用鼠标滚轮进行缩放。
我该如何解决这个问题?
https://observablehq.com/d/8a5dfbc7d858a16b
// mouse wheel zoom not working because use of zoomIdentity
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("display", "block");
const zoom = d3Zoom.zoom()
svg.call(zoom);
const zoomArea = svg.append('g');
zoom.on('zoom', (e) => {
zoomArea.attr("transform", e.transform)
})
zoomArea.append('circle')
.attr("cx", width/2)
.attr("cy", height/2)
.attr("r", 20)
zoom.scaleTo(svg, d3Zoom.zoomIdentity)
return svg.node();
}
解决方案
的第二个参数zoom.scaleTo(svg, d3Zoom.zoomIdentity)
接受一个k
缩放因子(例如,2 表示 2 倍缩放)。该方法zoom.scaleTo
旨在用于设置缩放级别,而不是平移(x 和 y 位置)。
如果要将整个变换设置为缩放标识(重置缩放级别以及 x 和 y 位置),方法是zoom.transform(svg, d3Zoom.zoomIdentity)
.
如果您确实只是想重置比例,您可以使用zoom.scaleTo(svg, d3Zoom.zoomIdentity.k)
,或简单地使用zoom.scaleTo(svg, 1)
。
推荐阅读
- r - ggplot geom_errorbar 位置不正确
- swift - 不推荐使用带有 UnsafeBytes 的数据
- javascript - 3d 立方体显示不完美
- java - 使用从私有按钮 ActionListener 到另一个 jframe 的变量
- mysql - MariaDB 无法在 WSL 和 windows 之间自动同步
- android - Android自定义主题,工具栏颜色不变
- oop - 考虑到依赖注入,我应该在哪里构建嵌套逻辑层中的对象?
- python - 使用 BeautifulSoup 从 Web 上抓取 API 并部署在 heroku 上
- typescript - 打字稿:如何从可能是也可能不是数组元素的泛型中推断类型
- r - 如何有选择地从数据框中的元素中删除字符?