Question

我通过单击一个按钮来放大图形，效果很好。但是，当我切换到鼠标滚轮进行缩放时，“ event.transform”的值不是最新的平移和缩放，而是初始值。下面是我的主要代码：

import { ZoomBehavior, zoom, zoomIdentity, zoomTransform } from 'd3-zoom';
...
const zoom = zoom();
svg.call(
    zoom.on('zoom', function(){
        graph.attr('transform', event.transform);  // line: 1
    })
)
...
// triggered by click
clickZoom(dir: 1|-1){
    const view = {...zoomTransform(graph.node())}
    const size = graph.node().getBBox();
    let newScale = view.k * (1 + zoomFactor * dir);
    view.x += size.width * (view.k - newScale)/2;
    view.y += size.height * (view.k - newScale)/2;
    view.k = newScale;
    interpolateZoom([view.x, view.y], view.k);
}
interpolateZoom(
    translate: [number, number],
    scale: number,
  ) {
    const t = transition()
      .duration(200)
      .ease();
    return graph
      .transition(t)
      .call(
        zoom.transform,
        zoomIdentity.translate(translate[0], translate[1]).scale(scale),
      );
  }

如果我通过轮式缩放来缩放图形，然后单击按钮进行缩放，则zoomTransform的值也不是实际值。

当我单击按钮进行缩放时，我控制了'event.transform'的值，它始终是正确的，但是当我切换到滚轮缩放时，其值首先更改为初始值。

那么如何正确同步zoomTransform和event.transform的值？

d3.jsv4：滚轮缩放并单击缩放，转换后的数据不同步

0 个答案: