JavaScript is required

动态追加数据2

连续自动布局动画

演示连续运行的力导向布局,创建具有节点始终运动的不断演进的可视化。

连续自动布局动画

功能概述

此示例演示连续运行的力导向布局,创建不断演进的可视化,其中节点始终处于运动状态。

核心特性实现

无限布局循环

配置布局无限期运行:

const myLayout = new MyForceLayout({
    maxLayoutTimes: Number.MAX_SAFE_INFINITY
}, graphInstance.getOptions(), graphInstance);

启动自动布局

启用连续布局更新:

graphInstance.setLayoutor(myLayout, true, true);
graphInstance.startAutoLayout();

停止自动布局

卸载时正确清理:

useEffect(() => {
    return () => {
        graphInstance.stopAutoLayout();
    };
}, []);

创意使用场景

  • 屏幕保护程序显示:动画数据可视化
  • 监控仪表板:实时网络活动
  • 艺术可视化:生成式图表艺术
  • 数据探索:通过运动发现模式
  • 交互式背景:动态环境视觉