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的transform属性，就像重绘函数一样。只需使用您自己的值而不是d3.event.translate。例如：

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

将缩放2倍到svg的中心。使用5代替2将放大5倍。

click to zoom map示例很好地演示了如何执行此操作

放大使用D3

1 个答案: