网络布局切换 - 在物理、逻辑和环形拓扑视图之间切换

网络拓扑布局切换

功能概述

本示例演示专为网络拓扑可视化设计的布局切换。它包括不同网络视图的专用布局：物理布局（地理）、逻辑布局（分层）和环形拓扑。每种布局为各种分析任务强调网络结构的不同方面。

核心特性实现

物理布局（地理）

const physicalLayout = {
    layoutName: 'fixed',
    // 节点按真实世界坐标定位
    nodes: networkNodes.map(n => ({
        ...n,
        x: n.longitude * scale,
        y: n.latitude * scale
    }))
};

逻辑布局（分层）

const logicalLayout = {
    layoutName: 'tree',
    from: 'top',
    // 显示网络层：核心、分发、接入
    layers: ['core', 'distribution', 'access']
};

环形拓扑布局

const ringLayout = {
    layoutName: 'circle',
    // 节点环形排列以实现冗余可视化
    centerX: canvasWidth / 2,
    centerY: canvasHeight / 2
};

创意使用场景

网络管理控制台：在故障排除期间在物理和逻辑视图之间切换。

数据中心设计：可视化机柜布局与网络拓扑。

电信网络：显示地理分布与逻辑层级。

文档生成：从相同数据生成不同的图表类型。

容量规划：从不同结构角度分析网络。