javascript - d3.js:放大点击事件

Question

我试图获得相同的行为 Wil Linssen's implementation但在 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));

但是还是有问题，貌似有缩放，缩小...

示例:Example on d3.v4 - jsfiddle

感谢帮助

Answer 1

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

这个版本也包含pan，如果不需要，去掉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);
}