D3力的导向图在变焦上断裂

发布于 2025-01-18 05:44:48 字数 1027 浏览 2 评论 0原文

我正在使用 d3 7.3.0 版本，并且我的代码基于此示例。我的问题是，当我放大（或缩小）时，圆圈的布局会中断并变为

最初是这样的

实现缩放的代码是

    const zoomed = d3.zoom()
      .scaleExtent([0, 3])
      .on('zoom', event => {
        graph.selectAll('g').attr('transform', event.transform);
      });

我注意到，如果我添加以下代码行，那么它可以防止它中断。

    const zoomed = d3.zoom()
      .scaleExtent([0, 3])
      .on('zoom', event => {
        graph.selectAll('g').attr('transform', event.transform);

        // This line prevents zoom from breaking
        simulation.restart();
      });

但缺点是速度明显变慢。有没有更有效的方法来防止它像这样破裂？

任何帮助将不胜感激。谢谢

原文

I'm using version 7.3.0 of d3 and I have based my code on this example. My problem is that when I'm zooming in (or out) the layout of the circles breaks and becomes

while initially was like this

The code that implements the zoom is

    const zoomed = d3.zoom()
      .scaleExtent([0, 3])
      .on('zoom', event => {
        graph.selectAll('g').attr('transform', event.transform);
      });

I have noticed that if I add the following line of code, then it prevents it from breaking.

    const zoomed = d3.zoom()
      .scaleExtent([0, 3])
      .on('zoom', event => {
        graph.selectAll('g').attr('transform', event.transform);

        // This line prevents zoom from breaking
        simulation.restart();
      });

But the downside is that it becomes noticeably slower. Is there a more efficient way to prevent it from breaking like that?

Any help would be appreciated. Thank you

分享到QQ

分享到微博