hideItem循环使用会蓝屏

[zhaokgithub]

使用Fruchterman图布局的时候，循环使用hideItem时图区域蓝屏

[Yanyan-Wang]

写个在线 demo 看下

[zhaokgithub]

不太好写，代码在内网。什么情况下会导致蓝屏。（节点变成一块蓝色背景）

[Yanyan-Wang]

应该不会的，没有遇到过这个问题。先把 G6 升级到最新版本（3.4.7），升级的时候注意一下：https://g6.antv.vision/zh/docs/manual/FAQ/upgradeGuide。

还有问题的话写最小复现的 demo 到 codepen.io 或者其他在线代码平台都可以。

[zhaokgithub]

找到了问题原因所在了：
1.拓扑节点过多时并且使用type:'image'来渲染
2.点击某个节点调用了changeData()重新渲染视图
3.点击另一个节点隐藏其他节点，此时会出现蓝屏
请帮忙看下如何解决

[zhaokgithub]

//补充下demo codepen.io太卡了
import G6 from '@antv/g6';

let data = {
nodes:[{
id: '30',
type:'image',
label: '30',
cluster: 'd',
},{
id: '38',
label: '38',
type:'image',
cluster: 'd',
},{
id: '39',
label: '39',
cluster: 'd',
},{
id: '37',
label: '37',
cluster: 'd',
}]
, edges:[ {
source: '30',
target: '37',
cluser:'b'
},{
source: '30',
target: '38',
cluser:'c'
},{
source: '30',
target: '39',
cluser:'c'
},]}

const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
const graph = new G6.Graph({
container: 'container',
width,
height,
modes: {
default: ['drag-canvas', 'drag-node'],
},
layout: {
type: 'fruchterman',
gravity: 5,
speed: 5,
},
animate: true,
defaultNode: {
size: 30,
style: {
lineWidth: 2,
stroke: '#5B8FF9',
fill: '#C6E5FF',
},
},
defaultEdge: {
size: 1,
color: '#e2e2e2',
style: {
endArrow: {
path: 'M 0,0 L 8,4 L 8,-4 Z',
fill: '#e2e2e2'
},
},
},
});
let nodes=[{
id: '30',
type:'image',
label: '30',
cluster: 'd',
},{
id: '38',
label: '38',
type:'image',
cluster: 'd',
},{
id: '39',
label: '39',
cluster: 'd',
},{
id: '37',
label: '37',
cluster: 'd',
}]
let edges=[ {
source: '30',
target: '37',
cluser:'b'
},{
source: '30',
target: '38',
cluser:'b'
},{
source: '30',
target: '39',
cluser:'b'
},]
graph.on("node:click",function(node){
//8data.nodes=data.nodes.concat(nodes)
//data.edges=data.edges.concat(edges)
console.log()
graph.changeData({nodes,edges})
})
graph.on("node:dblclick",function(node){
nodes.forEach(item=>{
if(item.id !='30'){
graph.hideItem(item.id)
}
})
})
graph.data(data);
graph.render();

[zhaokgithub]

另外补充下，我把render改成svg是没有这个问题的。但是svg性能太差，不想用，求帮忙解决下。

[Yanyan-Wang]

https://codepen.io/Yanyan-Wang/pen/ZEbKQNe

使用你的 demo 似乎没有复现

[zhaokgithub]

可以复现的，你先单机一个节点，然后在双击节点有时双击一次就会有，有时双击多次，然后30节点就变成蓝色方块了

[Yanyan-Wang]

经排查，已确定是底层渲染引擎的局部渲染问题，正在修复中。

[zhaokgithub]

多谢

[Yanyan-Wang]

可以先把局部渲染关掉临时解决这个问题：

graph.get('canvas').set('localRefresh', false);

在实例化 graph 后调用。
底层渲染引擎正在排期修复中。

[github-actions]

This issue has been closed because it has been outdate for a long time.
Please open a new issue if you still need help.
这个 issue 已经被关闭，因为 它已经过期很久了。
如果你仍然需要帮助，请创建一个新的 issue。