我正在使用 d3.js V 4.0 在 SVG 中提供缩放和平移功能。我正在实现一个重置按钮,让我回到图像的中心。它正在工作,但它使用默认的 d3.interpolateZoom,因此图像在过渡期间会缩小。我只想缩放以进行标准插值,但我无法弄清楚如何更改缩放行为的插值器。 这是代码的缩写版本:
var map = document.querySelector('#map');
var everything = d3.select('#everything');
var zoomBehavior = d3.zoom();
zoomBehavior.scaleExtent([0.5, 10])
.on('zoom', zoomed);
d3.select(map).call(zoomBehavior);
function zoomed() {
everything.attr('transform', d3.event.transform);
}
function reset() {
d3.select(this.map)
.transition()
.duration(1000)
.call(zoomBehavior.transform, d3.zoomIdentity);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.0/d3.min.js"></script>
<svg id="map" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="everything">
<circle r="5" cx="50" cy="15"></circle>
</g>
</svg>
<button onclick="reset()">reset</button>
不幸的是,这并没有表现出我所看到的行为。 (在我的真实版本中,比例 k 使用 van Wijk smooth zooming 通过 0 进行插值)但问题仍然有效。如果我要更改此缩放行为的插值器,我将如何以及在何处进行更改?我尝试调用文档似乎建议的 zoomBehavior.interpolate(d3.interpolate),但我收到一条错误消息,指出 zoomBehavior.interpolate 不是一个函数。
最佳答案
我们遇到了同样的问题,使用interpolate
方法解决了。应用于您的代码,它看起来像这样:
zoomBehavior.interpolate(d3.interpolate).scaleExtent([0.5, 10])
.on('zoom', zoomed);
根据 http://devdocs.io/d3~4/d3-zoom#zoom_interpolate ,d3.interpolate
应用“两个 View 之间的直接插值”,而默认值是 d3.interpolateZoom
,它应用我们都不想要的“平滑缩放”。
关于javascript - 如何更改 d3.js 中缩放行为的插值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39998748/