请提供相关 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);
};
});