javascript - 如何将 d3.zoom() 应用于 HTML 元素

Question

我不知道如何将 d3.zoom 行为正确应用到 HTML 元素(不是 SVG)。在 documentation关于如何做到这一点的唯一建议是:

Similarly, to apply the transformation to HTML elements via CSS:

div.style("transform", "translate(" + transform.x + "px," + transform.y + "px) scale(" + transform.k + ")");

所以我所做的是:( "Working" example )

var zoom = d3.zoom()
  .scaleExtent([0.1, 1])
  .on('zoom', zoomed);

var root = d3.select('.root').call(zoom);

function zoomed() {
  var transform = d3.event.transform;
  root.style("transform", "translate(" + transform.x + "px," + transform.y + "px) scale(" + transform.k + ")");
}

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

所以我所做的是使用父元素来附加缩放行为和进行转换的子元素。 Here's an example的。现在的问题是转换困惑了。我无法完全理解到底出了什么问题以及为什么，但是如果我用鼠标滚轮进行缩放，转换后的 Canvas 肯定没有做它应该做的事情(在放大等时远离鼠标而不是靠近鼠标)。

不幸的是，我找不到任何有关如何将 d3.zoom 与 HTML 结合使用的示例。有一个更好的方法吗？或者我可以在使用子元素时以某种方式修复转换吗？

Answer 1

仅更改scale值，

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

Working demo