IssueHuntchangeData后drag-canvas无法生效如何解决 #5590
williammyuan posted onGitHub
问题描述
配置
export const defaultConfig = {
width: 1200,
height: 800,
defaultZoom: 0.8,
defaultLevel: 3,
modes: {
default: ['drag-canvas', 'drag-node', 'zoom-canvas'],
custom: ['drag-canvas', 'drag-node', 'zoom-canvas'],
},
fitView: true,
animate: true,
defaultNode: {
type: 'flow-rect',
style: {
stroke: '#f00', // 边框颜色
lineWidth: 3, // 边框宽度
},
// 设置节点的状态样式
},
defaultEdge: {
type: 'polyline',
style: {
radius: 10,
stroke: '#CED4D9',
endArrow: true,
lineWidth: 1,
// endArrow: {
// path: 'M 0,0 L 10,-5 L 10,5 Z', // 产生一个更尖的箭头形状
// fill: 'rgba(187, 187, 187, 1)',
// stroke: 'rgba(187, 187, 187, 1)',
// },
},
},
layout: {
type: 'dagre',
rankdir: 'LR',
nodesep: 30,
ranksep: 100,
},
edgeStateStyles: {
// edge style of active state
active: {
opacity: 1,
stroke: '#005AFF',
},
// edge style of selected state
},
};
实例化
graphRef.current = new G6.Graph({
container: ref.current,
...defaultConfig,
width: scrollWidth,
height: scrollHeight,
plugins: [tooltip, toolbar, contextMenuFn(handlerClickMenu)],
});
初始化
useEffect(() => {
if (!!data) {
graphData = data;
if (firstRef.current) {
graphRef.current.data(data);
graphRef.current.render();
// setFirstLoad(false);
firstRef.current = false;
} else {
graphRef.current.changeData({
nodes: [
{
id: 'node1',
"platformCode": "lake",
"resourceName": "测试决策流",
"resourceCode": "pdos_new_flow",
"resourceType": "FLOW",
"resourceStatus": 7,
"version": "V1",
"details": null,
"updateName": "ianzzheng",
"updateTime": "2024-03-08 17:35:57",
"children": [],
"direction": null
},
{
id: 'node2',
"platformCode": "lake",
"resourceName": "测试决策流",
"resourceCode": "pdos_new_flow",
"resourceType": "FLOW",
"resourceStatus": 7,
"version": "V1",
"details": null,
"updateName": "ianzzheng",
"updateTime": "2024-03-08 17:35:57",
"children": [],
"direction": null
},
],
edges: [
{
source: 'node1',
target: 'node2',
},
],
});
}
}
}, [data]);
重现链接
无
重现步骤
1、初始化可以拖动画布 2、重新加载数据后,画布拖动不了
预期行为
期望改变数据后,还可以拖动画布
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
- G6 版本: [4.8.24]
屏幕截图或视频（可选）
No response
补充说明（可选）
No response
