如何将 d3.zoom() 应用于 HTML 元素答案

【问题标题】：How to apply d3.zoom() to a HTML element如何将 d3.zoom() 应用于 HTML 元素
【发布时间】：2017-05-10 22:08:36
【问题描述】：

我不知道如何正确地将 d3.zoom 行为应用于 HTML 元素（不是 SVG）。在documentation 中，关于如何执行此操作的唯一建议是：

同样，通过 CSS 将转换应用于 HTML 元素：

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 的那个。现在的问题是转换搞砸了。我无法完全理解到底是什么搞砸了以及为什么，但是如果我用鼠标滚轮缩放，转换后的画布肯定没有做它应该做的事情（放大时远离鼠标而不是靠近鼠标等）。

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

【问题讨论】：

标签： javascript html d3.js

【解决方案1】：

仅更改scale 值，

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

Working demo

【讨论】：

嘿！是的，这种作品。但是如果内容与内部 div 重叠怎么办？意义有一个消极的立场或一个大于它的大小的立场？那么就不可能朝它放大。 Working Demo
我无法重现该场景，但是...您是否尝试过评论 .scaleExtent([0.1, 1]) 行？ example
我的意思是，例如，我将如何放大左外矩形？这个矩形只有在我缩小到足够远时才可见，但一旦我再次放大，它显然会超出框架。

【解决方案2】：

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

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

【讨论】：