Javascript 如何更改d3.js中缩放行为的插值

我使用d3.JSV4.0在SVG中提供缩放和平移。我正在执行一个重置按钮，使我回到图像的中心。它正在工作，但它使用默认的d3.interpolateZoom，因此图像在过渡期间会缩小。我只希望缩放可以进行标准插值，但我不知道如何更改缩放行为的插值器。 以下是代码的缩写版本：

var-map=document.querySelector（'#map'）；
var everything=d3.选择（“#everything”）；
var zoomBehavior=d3.zoom（）；
zoomBehavior.scaleExtent（[0.5,10]）
.打开（“缩放”，缩放）；
d3.选择（映射）.调用（zoomBehavior）；
函数缩放（）{
attr（'transform'，d3.event.transform）；
}
函数重置（）{
d3.选择（此.map）
.transition（）
.持续时间（1000）
.call（zoomBehavior.transform，d3.zoomIdentity）；
}

重置

如果不看到您试图避免的行为，很难回答这个问题。上面的示例代码按预期工作。这就是说，这里有一个例子，完全控制插值器，从而过渡。在这里，我将圆圈缩放回svg右下角的

scale:1

但

x

和

y

：

重置
var map=d3。选择（“#map”），
everything=d3。选择（“#everything”）；
var zoomBehavior=d3.zoom（）；
zoomBehavior.scaleExtent（[0.5,10]）
.打开（“缩放”，缩放）；
map.call（zoomBehavior）；
函数缩放（）{
attr（'transform'，d3.event.transform）；
}
函数重置（）{
d3.选择（此.map）
.transition（）
.持续时间（1000）
.tween（“自定义”，函数（）{
var curZoom=d3.zoomTransform（map.node（）），
kInter=d3.插值（curZoom.k，1），
xInter=d3.插值（curZoom.x，240），
yInter=d3.插值（curZoom.y，99）；
返回函数（t）{
变量ts=d3.zoomIdentity
.翻译（信特（t），音特（t））
.刻度（金特（t））；
调用（zoomBehavior.transform，ts）；
};
});
}

我们遇到了同样的问题，并使用

插值方法解决了它。应用于您的代码时，它将如下所示：

zoomBehavior.interpolate(d3.interpolate).scaleExtent([0.5, 10])
  .on('zoom', zoomed);

根据，
d3.interpolate
应用“两个视图之间的直接插值”，而默认值是
d3.interpolateZoom
，它应用了我们双方都不想要的“平滑缩放”。
注意，您现在可以使用（v2.0.1）中的
.rho
自定义缩放和平移时获得的曲率量。默认值是
Math.sqrt（2）
，而
rho（0）
会导致线性插值

以下是您将如何设置它：

let zoomBehavior = d3.zoom()
    .interpolate(d3.interpolateZoom.rho(0.9)) // 0.9 for less curvature
    .scaleExtent([0.5, 10])
    .on('zoom', zoomed);

虽然您的示例在代码段中非常有效，但当我在自己的代码中尝试时，tween中返回的函数只被调用一次，因此转换不会真正发生。你知道什么会导致这只发射一次，而不是在持续时间内重复发射吗？@EricJ，根据你提供的有限信息很难说。你能用你的特定代码创建一个可复制的例子吗？我似乎不能在一个片段或任何其他系统中复制这个问题。这个系统一定有问题。天哪，我本来打算写一个tween函数，直到我看到这个。太琐碎了！