使用D3放大

Zooming in using D3

本文关键字：放大 D3 使用      更新时间：2023-09-26

我如何在某个点放大svg上的某个点，然后缩小到整个svg ?只有两种状态，我不需要鼠标滚动缩放或者一个放大、缩小按钮。

我已经查找并发现。缩放在d3文档，但我不确定如何在我的情况下应用。

查看鼠标缩放的典型实现方式:

var svg = d3.select("#svg")
    .call(d3.behavior.zoom().on("zoom", redraw))
function redraw() {
  console.log("translate: ", d3.event.translate, "scale:", d3.event.scale);
  svg.attr("transform",
      "translate(" + d3.event.translate + ")"
      + " scale(" + d3.event.scale + ")");
}

滚动会输出如下内容:

translate:  [-66.3438, -36.359] scale: 1.1809

为了避免实现滚动缩放，您可以像重绘函数一样直接修改svg的转换属性。只需使用您自己的值，而不是d3.event.translate。例如:

svg.attr("transform",
      "translate(" + [0,0] + ")"
      + " scale(" + 2 + ")");

将缩放2倍到svg的中心。使用5而不是2可以放大5倍。

点击缩放地图的例子很好地演示了如何做到这一点

相关文章：