antvis/G6


The issue has been closed
🐛 树图更新边之后,再执行节点收起展开功能,边的类型没有变化 #4777
visiky posted onGitHub
问题描述
复现代码
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;
data.children[0].collapsed = true
const graph = new G6.TreeGraph({
container: 'container',
width,
height,
modes: {
default: [
{
type: 'collapse-expand',
onChange: function onChange(item, collapsed) {
const data = item.get('model');
data.collapsed = collapsed;
return true;
},
},
'drag-canvas',
'zoom-canvas',
],
},
defaultNode: {
size: 26,
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
},
defaultEdge: {
type: 'cubic-horizontal',
},
layout: {
type: 'mindmap',
direction: 'H',
getHeight: () => {
return 16;
},
getWidth: () => {
return 16;
},
getVGap: () => {
return 10;
},
getHGap: () => {
return 50;
},
},
});
let centerX = 0;
graph.node(function (node) {
if (node.id === 'Modeling Methods') {
centerX = node.x;
}
return {
label: node.id,
};
});
graph.data(data);
graph.render();
graph.fitView();
// 更新边
graph.getEdges().forEach(edge => {
edge.update({ type: 'line' })
})
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);
};
});
重现链接
https://codesandbox.io/s/g6-bian-geng-xin-hlhjmr
重现步骤
- edge 初始样式为
cubic-horizontal
, - 渲染结束之后,执行 update 更新 edge 为
line
- 点击
Classification
节点展开,后续边依然还是cubic-horizontal
预期行为
期望边样式为更新后的样式
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
- G6 版本: [4.5.1 ... ]
屏幕截图或视频(可选)
No response
补充说明(可选)
No response