[Bug]: After changeData, the result of changing the edge state item.setState does not meet expectations

[Cherry860]

Describe the bug / 问题描述

背景描述：
1、节点之间存在多对多的关系，相同线段会重合显示，视觉上进行了合并，但实际是有多条线段的
2、点击某个节点后，需要展开子节点，为了达到这一效果，点击节点后使用了changeData()
3、点击某个节点后，同时需要将节点链路进行高亮，使用item.setState改变状态实现。
问题现象：
点击节点后，部分高亮的线段没有置于最顶层，已经使用了item.toFront();

定位过程：
1、去掉changeData() 后就正常显示了，但是要实现展开和收缩节点，必须要使用changeData
2、尝试添加 setTimeout(() => {实现高亮 }, 1000); 可以解决，那就是changeData异步的问题了，有什么好的解决方案吗

Reproduction link / 复现链接

No response

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

No response

G6 Version / G6 版本

Please select / 请选择

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[petercat-assistant[bot]]

您提到的问题涉及到在使用 changeData() 后，部分高亮的线段没有置于最顶层的问题。您已经尝试使用 item.toFront() 和 setTimeout() 来解决这个问题，但仍然存在一些困扰。

这个问题可能与 changeData() 的异步特性有关。以下是一些可能的解决方案：

1. 使用 requestAnimationFrame: 在调用 changeData() 后，使用 requestAnimationFrame 来确保在浏览器完成重绘后再进行高亮操作。这可以确保 DOM 的更新是同步的。

   graph.changeData(newData);
   requestAnimationFrame(() => {
     // 执行高亮操作
     item.setState('highlight', true);
     item.toFront();
   });

2. 事件监听: 确保在 changeData() 完成后再执行高亮操作，可以通过监听图的 afterrender 事件来实现。

   graph.on('afterrender', () => {
     // 执行高亮操作
     item.setState('highlight', true);
     item.toFront();
   });
   graph.changeData(newData);

3. 延迟执行: 如果以上方法仍然无法解决问题，可以尝试增加 setTimeout 的延迟时间，确保在数据更新完成后再进行高亮。

如果这些方法仍然无法解决您的问题，建议您提供一个最小可复现的示例，以便更好地诊断和解决问题。

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.