使用 D3 放大答案

【问题标题】：Zooming in using D3使用 D3 放大
【发布时间】：2013-06-05 23:20:48
【问题描述】：

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

我在 d3 文档中查找并找到了 .zoom，但不确定如何在我的情况下应用。我只见过太复杂的滚动缩放。

【问题讨论】：

【解决方案1】：

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

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 倍。

click to zoom map 示例很好地演示了如何做到这一点

【讨论】：