自定义力学布局与节点聚类

演示自定义力导向布局算法，实现基于颜色属性的节点聚类，并支持实时物理参数调整。

自定义力学布局与节点聚类

功能概述

此示例演示了一个自定义力导向布局算法，该算法实现了基于颜色的节点聚类。与仅处理节点斥力和连线弹性的标准力学布局不同，此自定义布局在相同颜色的节点之间添加了吸引力，从而实现按属性自动分组。

核心特性实现

自定义力学布局类

MyForceLayout 类扩展了基础布局功能以添加基于颜色的吸引力：

• 节点斥力：控制节点相互排斥的强度
• 连线弹性：控制连接节点之间的弹簧力
• 颜色吸引力：将相同颜色的节点拉到一起的自定义逻辑

const myLayout = new MyForceLayout({
    maxLayoutTimes: Number.MAX_SAFE_INTEGER,
    force_node_repulsion,
    force_line_elastic
}, graphInstance.getOptions(), graphInstance);
graphInstance.setLayoutor(myLayout, true, true);

动态布局参数更新

示例提供实时滑块来调整物理参数：

• 节点斥力系数（0.01 - 1.2）：较高的值增加分离力，但可能导致抖动
• 连线弹性系数（0.01 - 1.2）：较高的值增强连接，但可能导致不稳定

const updateLayoutOptions = async () => {
    graphInstance.stopAutoLayout();
    const forceLayout = graphInstance.layoutor as MyForceLayout;
    if (forceLayout) {
        forceLayout.updateOptions({
            force_node_repulsion,
            force_line_elastic
        });
        forceLayout.start();
    }
    graphInstance.startAutoLayout();
};

随机颜色分配和重新聚类

按钮触发随机颜色重新分配并观察布局重新组织：

const resetNodeColor = async () => {
    graphInstance.getNodes().forEach(node => {
        const newColor = ['red', 'yellow', 'blue'][Math.floor(Math.random() * 3)];
        graphInstance.updateNode(node, { color: newColor });
    });
    await graphInstance.sleep(600);
    await updateLayoutOptions();
};

初始节点定位

节点在力学布局开始之前被随机定位：

data.nodes.forEach(node => {
    node.x = Math.random() * 300;
    node.y = Math.random() * 300;
    node.color = ['red', 'yellow', 'blue'][Math.floor(Math.random() * 3)];
});

布局生命周期管理

组件正确启动和停止自动布局动画：

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

创意使用场景

• 数据聚类可视化：按类别、状态或任何属性自动分组项目
• 社交网络分析：通过视觉聚类显示社区检测
• 市场细分：按行为或人口统计数据对客户细分进行分组
• 知识图谱：将相关概念聚集在一起以便更好地理解
• 生物网络：按功能相似性对蛋白质或基因进行分组