javascript - 更改 SVG 内容时保留 d3 缩放状态?
问题描述
我正在使用 d3 渲染一些东西,并使用d3.zoom
鼠标进行缩放。它有效,但我还需要定期更改 svg 的内容(进行完整$('svg').html($('svg').html())
调用,因为我的 SVG 包含 HTML)。
问题是当我这样做时,我失去了缩放状态。我试图通过存储缩放变换并在更新后重新应用它来跟踪它,但它不起作用。
这是我的尝试,使用 dagre-d3 示例图。
简而言之,这就是我正在做的事情:
let transform;
function dag(){
// ... set up stuff here
var svg = d3.select("svg"),
inner = svg.select("g");
// Set up zoom support
var zoom = d3.zoom().on("zoom", function() {
//store transform
transform = d3.event.transform
inner.attr("transform", d3.event.transform);
});
svg.call(zoom);
// render graph
new dagreD3.render()(inner, g);
// Center the graph
var initialScale = 0.75;
svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
svg.attr('height', g.graph().height * initialScale + 40);
}
setInterval(() => {
// simulate reloading content
dag()
console.log('render again')
//try and apply saved transform state
transform && inner.attr("transform", transform);
}, 2000)
解决方案
在缩放函数中设置变换后,使用“initialScale”变量再次设置 svg 比例,问题可以在这里看到:
// Center the graph
var initialScale = 0.75;
svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
为了解决这个问题,您需要根据 svg 的当前比例变换更改“initialScale”变量中的值。如此处所示:
// Center the graph
var initialScale = (typeof transform != 'undefined') ? transform.k : 0.75;
svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
带有修复的代码的代码笔:https ://codepen.io/anon/pen/MBwBYY?editors=0011
推荐阅读
- c# - 如何获取 WCF 服务的单个 wsdl 文件?
- javascript - 由于使用模块时出现不允许的 MIME 类型(“text/html”)错误,从“http://127.0.0.1:1234/Ball”加载模块被阻止
- pyspark - 在 PySpark 中,如何使用从一列派生的值从另一列获取数据?
- html - 如何在不破坏代码的情况下添加悬停图像过渡?
- vim - 如何动态切换(Vimplug)插件?
- windows - 我需要从一个数组循环到另一个新数组
- python-3.x - mitmproxy 流乘请求
- ios - UIStackView 水平压缩/拥抱问题。需要最后一个项目来拉伸以填充剩余的宽度,但如果很大则不要压缩其他项目
- google-chrome-app - 我如何无法安装我自己开发的 Google Chrome 应用程序?
- excel - 仅在 Excel 中包含文本和数字的复杂字符串中保持字符串遵循特定模式