树图删除中间的某个节点并保留他的子节点

[guawazi233]

Describe the bug / 问题描述

树图删除中间的某个节点，并将删除节点的所有子节点加入删除节点的父节点下，使用updateChildren或者先删后添加的方式都没办法展示出删除节点的父节点下连接删除节点的子节点，调试过程中发现他们之间的边未存在，但是当把删除节点的子节点的id改为另一个唯一id值时，可以正确展示，但是业务需要不能修改id，请问有什么解决办法吗？只更新删除节点父节点

Reproduction link / 重现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

G6 Version / G6 版本

4.x

Operating System / 操作系统

macOS

Browser / 浏览器

Chrome

Additional context / 补充说明

No response

[Aarebecca]

请提供相关 demo

[guawazi233]

请提供相关 demo 使用图例写的一个demo如下

import G6 from '@antv/g6';

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
  .then((res) => res.json())
  .then((data) => {
    const container = document.getElementById('container');
    const width = container.scrollWidth;
    const height = container.scrollHeight || 500;
    const graph = new G6.TreeGraph({
      container: 'container',
      width,
      height,
      linkCenter: true,
      modes: {
        default: [
          // {
          //   type: 'collapse-expand',
          //   onChange: function onChange(item, collapsed) {
          //     const data = item.getModel();
          //     data.collapsed = collapsed;
          //     return true;
          //   },
          // },
          'drag-canvas',
          'zoom-canvas',
        ],
      },
      defaultNode: {
        size: 26,
        anchorPoints: [
          [0, 0.5],
          [1, 0.5],
        ],
      },
      defaultEdge: {
        type: 'cubic-vertical',
      },
      layout: {
        type: 'compactBox',
        direction: 'TB',
        getId: function getId(d) {
          return d.id;
        },
        getHeight: function getHeight() {
          return 16;
        },
        getWidth: function getWidth() {
          return 16;
        },
        getVGap: function getVGap() {
          return 80;
        },
        getHGap: function getHGap() {
          return 20;
        },
      },
    });

    graph.node(function (node) {
      let position = 'right';
      let rotate = 0;
      if (!node.children) {
        position = 'bottom';
        rotate = Math.PI / 2;
      }
      return {
        label: node.id,
        labelCfg: {
          position,
          offset: 5,
          style: {
            rotate,
            textAlign: 'start',
          },
        },
      };
    });

    //临时点击节点删除，请点击中间节点进行测试场景(实际会有菜单进行点击删除)
    graph.on('node:click',(e) => {
      //删除当前节点，并将子节点全部交给父节点，使用updateChidren直接更新父节点的子树
      const {item} = e;
      console.log('item:',item)
      const newChildren = item?._cfg?.children?.map(child => {
        const curItem = child.getModel();
        return curItem;
        // return {...curItem, id: curItem.id + '-'}  //更换新id
      });
      const curChildren = item?._cfg?.parent?._cfg?.children?.map(child => child.getModel())?.filter(c => c.id !== item?._cfg?.id);
      const parentId = item?._cfg?.parent?._cfg?.id;
      graph.updateChildren([...curChildren,...newChildren],parentId)
    })

    graph.data(data);
    graph.render();
    graph.fitView();

    if (typeof window !== 'undefined')
      window.onresize = () => {
        if (!graph || graph.get('destroyed')) return;
        if (!container || !container.scrollWidth || !container.scrollHeight) return;
        graph.changeSize(container.scrollWidth, container.scrollHeight);
      };
  });