TreeGraph，animate:true, addChild时会导致布局计算错误，节点重叠

[fanggz2017]

问题描述

使用TreeGraph，并且animate:true, 使用addChild添加子节点时，节点会出现重叠，并且removeChild后有些节点的位置也会出现偏差。

重现链接

https://codesandbox.io/s/drag-addchild-animate-z1snio

重现步骤

1. 设置animate: true；
2. 拖拽TreeGraph中的某一个节点时，用addChild()向其他节点后面追加子节点;
3. 会导致部分子节点出现重叠；
4. 用removeChild()删除所有追加的子节点后，之前的某些节点位置也会出现偏差。

预期行为

希望能正常显示，子节点不重叠，且子节点删除后布局显示正常

平台

• 操作系统: macOS
• 网页浏览器: Google Chrome
• G6 版本: 4.6.15

屏幕截图或视频（可选）

补充说明（可选）

这是什么个情况呢

[Yanyan-Wang]

因为每次 addChild 都会触发 changeData 和 重新布局，在有动画的时候，多次布局产生的动画产生冲突，出现了上述情况。多次 addChild 建议在数据中加完后一次性 changeData

  graph.on("node:dragstart", (evt) => {
    G6.Util.traverseTreeUp(data, (subTree) => {
      subTree.children = subTree.children || []
      subTree.children.push({
          id: `${subTree.id}-G16rect-${Math.random()}`,
          type: "rect",
          size: [80, 32],
          style: {
            radius: 4,
            fill: "#f00",
            lineWidth: 1,
            fillOpacity: 1
          }
        })
    });
    graph.changeData(data)
    graph.getGroup().setMatrix([1, 0, 0, 0, 1, 0, 145, 59, 1]);
  });

[hhlcom]

graph.changeData(data) 请问关闭动画能解决这个问题吗？

[Yanyan-Wang]

graph.changeData(data) 请问关闭动画能解决这个问题吗？

是的，可以在这种情况下，先关闭动画 graph.set('animate', false)。在完成所有操作时再打开动画