javascript - 使用 D3 放大

Question

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

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

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

单击缩放地图示例很好地演示了如何执行此操作