Javascript 如何将d3.zoom（）应用于HTML元素

我不知道如何正确地将

d3.zoom

行为应用于HTML元素（不是SVG）。在这方面，唯一的建议是：

类似地，要通过CSS将转换应用于HTML元素，请执行以下操作：

所以我做的是：（）

这里的问题是，如果缩小，缩放最终将停止，因为鼠标不再位于可缩放区域内

因此，我所做的是使用一个父元素来附加缩放行为和一个被转换的子元素。当然。现在的问题是，转换被搞砸了。我无法完全理解到底是什么搞砸了以及为什么会搞砸，但如果我用鼠标滚轮缩放，变换后的画布肯定没有做它应该做的事情（放大时远离鼠标，而不是朝着鼠标移动等等）

---

不幸的是，我找不到任何关于如何将

d3.zoom

与HTML结合使用的示例。有更好的方法吗？或者我可以在使用子元素时以某种方式修复变换吗？

仅更改

比例

值

canvas.style("transform", "translate(0,0) scale(" + transform.k + ")");

---

将变换原点设置为0,0：

root.style("transform", "translate(" + transform.x + "px," + transform.y + "px) scale(" + transform.k + ")").style("transform-origin","0 0");

---

嘿是的，这种方法很有效。但是如果内容与内部div重叠怎么办？意思有一个否定的位置，还是一个大于其大小的位置？那么就不可能向它放大。我无法重现这个场景，但是。。。您是否尝试过对行

.scaleExtent（[0.1,1]）

进行注释？我的意思是，例如，如何放大左外矩形？这个矩形只有在我缩小到足够远时才可见，但一旦我再次放大，它显然就超出了框架。

canvas.style("transform", "translate(0,0) scale(" + transform.k + ")");

root.style("transform", "translate(" + transform.x + "px," + transform.y + "px) scale(" + transform.k + ")").style("transform-origin","0 0");