javascript - 如何在第一次点击时停止重置缩放和平移 d3 图形?
问题描述
我已经实现了一个带有 d3 缩放元素的 d3 树图。目前,我一直在尝试对缩放和平移进行重置。不幸的是,当我尝试执行重置时,它会重置缩放和平移,直到我单击图表。那时,它会回到我之前缩放和平移的位置。
我尝试实现这个 Stack Overflow 问题中回答的内容:如何在 d3.js 中重置缩放?,但该帖子的 OP 没有使用子组来更改转换。我想要一种方法来永久重置我的 d3 图形的缩放和平移,但我还没有为我的场景找到任何资源。
//Zoom function so I can reset it later
let zoom = d3.zoom().on(`zoom`, function() {
//This was to part of the solution to stop it from shifting on first
//click after initial graph creation
svgZoom.attr(`transform`, d3.event.transform)
})
//The main zoom element, which calls the zoom function
let svgZoom = d3
.select(cfg.el)
.append(`svg`)
.attr(`viewBox`, `0 0 ${width} ${height}`)
.attr(`width`, `75%`)
.style(`max-height`, `${height}px`)
.style(`margin-left`, `12.5%`)
.style(`margin-top`, `${margin.top}`)
.on(`contextmenu`, () => d3.event.preventDefault())
.call(zoom)
.on(`dblclick.zoom`, null)
.append(`g`)
//This piece of code translates the graph
svg = svgZoom
.append(`g`)
.attr(`id`, `graph`)
.attr(`transform`, `translate(` + width / 4 + `,0)`)
//This I found this functionality on another Stack Overflow question,
//but it is not resetting to my base transition, and the reset only
//works until I click, then it goes back to where it was before.
let resetZoomPan = () => {
svgZoom.call(zoom.transform, d3.zoomIdentity)
}
TLDR:我想在调用函数时重置图表的缩放和平移,但目前它在第一次单击后恢复。
解决方案
推荐阅读
- python - Feather.compat 导入 ModuleNotFoundError:没有名为“feather.compat”的模块
- c# - EF6多对多关系,多表联表
- amazon-elastic-beanstalk - 如何刷新 Elastic Beanstalk 中的缓存?
- php - 从数据库中检索数据并将其存储在 php 中的 select 标记中
- ios - 在 UI 测试中执行完全向左滑动操作?
- excel - VBA:查找列中的最后一个元素
- javascript - 在 bot 命令中使用 Web API
- javascript - @ 用于处理 vue js 中的资产不起作用
- c# - 在哪里生成 SignInManager IdentityUser .cshtml 文件
- handlebars.js - BigCommerce 在主页上显示品牌(模板)