高级力导向布局配置

高级力导向布局，包含节点权重、线条弹性和动态节点添加的交互式控制，实现实时物理模拟。

高级力导向布局配置与动态权重控制

功能概述

此示例提供了一个高级力导向布局界面，可实时控制节点权重、线条弹性和动态节点添加。它演示了如何交互式地操作力布局参数并观察其对节点定位的影响。

核心特性实现

1. 动态节点权重分配

为节点分配随机 force_weight 值并相应更新其视觉大小：

const nodeWeight = rangeForNode[0] + Math.random() * rangeForNode[1];
const size = 10 + 10 * Math.sqrt(nodeWeight);
graphInstance.updateNode(node, {
    width: size,
    height: size,
    force_weight: nodeWeight,
    text: nodeWeight.toFixed(1)
});

2. 随机线条弹性

在指定范围内使用随机值控制线条弹性（弹簧强度）：

const lineElastic = rangeForLine[0] + Math.random() * rangeForLine[1];
graphInstance.updateLine(line, {
    text: lineElastic.toFixed(1),
    force_elastic: lineElastic,
    lineWidth: 0.5 + lineElastic
});

3. 位置重置以观察效果

将所有节点重置为围绕中心的椭圆排列以观察力布局效果：

const getOvalXy = (c_x, c_y, c_r, c_i, c_n, startAngle = 180) => {
    const deg_i = c_i * (360 / c_n);
    const angle_i = (180 - startAngle + deg_i) * Math.PI / 180;
    return {
        x: c_x + c_r * Math.sin(angle_i),
        y: c_y + c_r * Math.cos(angle_i) * -1
    };
};

4. 动态节点添加

添加新节点并连接到当前选中的节点：

const newNodes = [
    { id: newId + '-1', text: 'New node', x: Math.random() * 40, y: Math.random() * 40 },
    { id: newId + '-2', text: 'New node', x: Math.random() * 40, y: Math.random() * 40 }
];
graphInstance.addNodes(newNodes);
graphInstance.addLines(newLines);

5. 动画控制

启用/禁用节点位置和画布动画以优化性能：

graphInstance.enableNodeXYAnimation(); // 平滑过渡
graphInstance.disableNodeXYAnimation(); // 布局期间更好的性能

创意使用场景

• 物理模拟：模拟物体之间的重力或电磁力
• 社交网络分析：通过节点权重可视化影响力或重要性
• 聚类分析：调整力以揭示数据中的自然分组
• 网络动力学：研究网络如何随节点/边属性变化而演化
• 教育工具：通过交互式可视化教授力导向算法
• 数据探索：尝试参数以找到最佳布局