d3.js：缩放点击事件 [英] d3.js: Zoom on click event

问题描述

我试图获得相同的行为 Wil Linssen的实现
，但在d3。 js version 4.
我对版本4中的zoom api非常困惑。

I was trying to get same behavior Wil Linssen's implementation but on d3.js version 4. I am quite confused with zoom api in version 4.

我在原始实现中所做的更改是：
zoom.translate（）替换为
d3.zoomTransform（selection.node（））

The changes that I made in the original implementation is: zoom.translate() replaced with d3.zoomTransform(selection.node()) and appropriate points added instead:

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));

但它仍然有问题，看起来像缩放，缩小...

But it's still has a problem, looks like with scale, zoom out...

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

感谢您的帮助

推荐答案

使用d3 v4 api提供插件等外箱。在原始的问题缩放从头开始实现，这是没有意义在版本4.解决方案类似于@Nixie答案，并有几行代码。

After researching the most easiest way to use d3 v4 api that provides interpolation etc out of box. In original question zoom implemented from scratch, that doesn't make sense in version 4. Solution is similar to @Nixie answers and has few lines of code.

此版本包括如果你不需要，删除 svg.call（zoom）;

This version includes pan as well, if you do not need, remove svg.call(zoom);

最后一个例子： a href =https://jsfiddle.net/vbabenko/jcsqqu6j/9/ =nofollow> Zoom D3 v4 - jsfiddle

Final example: Zoom D3 v4 - jsfiddle

一有趣的注释：
函数：

One interesting note: The function:

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

调用（zoom.ScaleTo，zoomLevel） code> - 将放大到页面中央。但是如果你需要一个图像的中心，使用这个： call（zoom.transform，transform）;

其中 transform 是设置图像中心的函数。例如这样的函数：

Where transform is a function that sets center of your image. For example of such function:

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

这篇关于d3.js：缩放点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！