d3.js:放大点击事件

Question

我试图获得相同的行为Wil Linssen的实现 但是在d3.js版本4.我对版本4中的zoom api感到困惑.

我在原始实现中所做的更改是: zoom.translate()替换为 d3.zoomTransform(selection.node())并添加适当的点:

svg.attr("transform",
    "translate(" + t.x + "," + t.y + ")" +
    "scale(" + t.k + ")"
);

这个:

zoom
  .scale(iScale(t))
  .translate(iTranslate(t));

换成了

var foo = iTranslate(t);
zoom.
  translateBy(selection, foo[0], foo[1]);
zoom
  .scaleBy(selection, iScale(t));

但它仍然有问题,看起来像规模,缩小...

示例:d3.v4上的示例 - jsfiddle

谢谢您的帮助

Answer 1

在研究了使用 d3 v4 api 提供开箱即用插值等的最简单方法之后。在从头开始实现的原始问题缩放中，这在版本 4 中没有意义。解决方案类似于 @Nixie 答案，并且只有几行代码。

此版本还包含平移，如果不需要，请删除svg.call(zoom);

最后的例子：Zoom D3 v4 - jsfiddle

一个有趣的注释：该功能：

function transition() {
  svg.transition()
      .delay(100)
      .duration(700)
      .call(zoom.scaleTo, zoomLevel);
      //.on("end", function() { canvas.call(transition); });
}

call(zoom.ScaleTo, zoomLevel)- 将缩放到页面中心。但如果您需要图像的中心，请使用这个：call(zoom.transform, transform);

哪里transform有一个设置图像中心的函数。例如这样的函数：

function transform() {
  return d3.zoomIdentity
      .translate(width / 2.75, height / 2.75)
      .scale(zoomLevel)
      .translate(-width/2.75, -height/2.75);
}