关联网络图可视化与力导向关系图开发示例

第一部分基础，理解了数据 -> 视觉通道的映射关系；

接下来在第二部分，我们将进入稍微复杂一点的层次：关系绘图、数据连接与节点之间的连通表达。

一、从独立点到关联网络

很多业务不仅关注数据本身，更关注 数据之间的关系：如社交关系、知识图谱、系统依赖、事件传递链等。

Highcharts 在网络图 (Network Graph) 模块中支持方便地绘制节点与连接线。

关系网络图有几个特点：

节点 (node) 与连接 (link) 是核心概念
连线可以无方向或有方向（箭头）
节点可能具有类别、聚类属性、权重大小等
布局方式（force-directed, 聚类布局等）影响视觉结构

在本部分中，先介绍Highcharts如何从 ['from', 'to'] 连接表构建节点关系，以及如何给节点添加属性（如颜色、大小、类别）来区分不同关系。

具体来说，Highcharts 的 Network Graph 模块会读取一组形如 {'from': 'A', 'to': 'B'} 的连接记录，把每条记录的 from 和 to 字段分别解析为起点节点与终点节点，并自动为这些节点建立去重后的节点集合，同时生成对应的连线。也就是说，你只需要维护一张简单的连接表，Highcharts 就会替你完成节点去重、连线生成和布局计算，无需手动声明每个节点的坐标。

例如，下面这段数据就定义了三组关系：

javascript 复制代码

const data = [
  { from: 'A', to: 'B' },
  { from: 'B', to: 'C' },
  { from: 'A', to: 'C' }
];

Highcharts 会据此生成 A、B、C 三个节点，以及 A-B、B-C、A-C 三条连线，并自动完成去重与布局。

二、布局算法与力导向模拟

Network Graph 在视觉上最关键的一点就是布局。不同节点间在图中如何"排布"直接影响可读性。Highcharts 的默认布局算法往往是 力导向 (force-directed layout)，它通过模拟引力 / 排斥力，使节点在图中自然分布。

如何调整布局参数以获得更清晰的效果，比如：

调整节点之间的引力 / 排斥力系数
设置节点之间的最短 / 最长距离
控制节点移动阻尼 (damping) 或仿真步进数

这些参数变化会直接影响图中节点的聚集、拉伸或散布效果。

下面是一个 Highcharts Network Graph（力导向网络图） 示例。节点会在连线吸引、节点间排斥以及整体引力的作用下逐步布局。

javascript 复制代码

Highcharts.chart('container', {
    title: {
        text: '力导向网络图'
    },
    subtitle: {
        text: '节点位置由力导向算法自动计算'
    },
    chart: {
        type: 'networkgraph'
    },
    plotOptions: {
        networkgraph: {
            layoutAlgorithm: {
                type: 'reingold-fruchterman',
                enableSimulation: true,
                integration: 'verlet',
                gravitationalConstant: 0.06,
                friction: -0.9,
                linkLength: 100,
                maxIterations: 1000
            },
            marker: {
                radius: 18
            },
            dataLabels: {
                enabled: true,
                linkFormat: '',
                format: '{point.name}',
                allowOverlap: false
            }
        }
    },
    series: [{
        data: [
            ['中心主题', '节点 A'],
            ['中心主题', '节点 B'],
            ['中心主题', '节点 C'],
            ['节点 A', '节点 D'],
            ['节点 A', '节点 E'],
            ['节点 B', '节点 F'],
            ['节点 C', '节点 G'],
            ['节点 D', '节点 H'],
            ['节点 F', '节点 H'],
            ['节点 E', '节点 G']
        ]
    }]
});

Download HTML

其中，enableSimulation 开启布局模拟；连线产生吸引力、节点之间有排斥力，gravitationalConstant 控制整体的引力效果。示例保留了算法默认的吸引力和排斥力计算；可通过 series.layoutAlgorithm.attractiveForce 和 series.layoutAlgorithm.repulsiveForce 自定义它们。

此图需要加载 Network Graph 模块 ；建议同时加载 Accessibility 模块。

更多说明和自定义力参数示例见 Network graph 文档及力参数示例。

三、添加连通属性与辅助样式

在网络图中，不只是展示连接，还可能展示连接权重、方向、强度等。你可以给连线 (link) 加上属性，比如：

weight 或 value：表示连接强度
color / dashStyle：根据属性区分连线风格
arrow：指示方向

再者，为了让可视关联更清晰，可以给节点和连线加上不同的 高亮交互（hover / 鼠标经过时突出显示连接节点与线）。

四、交互式拉伸、拖拽、缩放

网络图通常希望能够在人机交互时更灵活。常见交互有：

节点拖拽（drag）后动态重新布局
鼠标缩放 / 平移画布
点击节点高亮其邻居节点与连线
节点 / 连线 tooltip 显示详细属性

五、优化与清晰性策略

网络图容易在节点过多时变得杂乱。以下是作者（与社区实践）推荐的优化策略：

限制初始节点数，只显示重点节点或核心子网
使用聚类 / 分组策略，把高度连通节点聚为组
对较弱或不重要连线进行视觉弱化（如透明、细线）
延迟加载子网：点选展开后才加载子节点连接
给节点加标签限制，只对关键节点显示文本

六、总结

本部分围绕 Highcharts 关系网络图（Network Graph）展开，核心要点可以概括为以下五个方面：

构建：通过 ['from', 'to'] 形式的连线数据即可描述节点关系，Highcharts 会根据连线端点创建并复用节点，再计算布局；需要指定节点属性时可配置 nodes。
布局：Network Graph 支持力导向布局，可调整布局算法及相关模拟参数，控制网络的聚集、拉伸和散布。
样式与属性：可以设置连线颜色、线型等样式。业务权重、箭头等效果应根据具体需求确认是否需要自定义实现。
交互：节点拖拽以及图表缩放、平移可通过相应配置实现；点击高亮邻居和自定义 tooltip 通常需要额外编写交互逻辑。
优化：通过减少初始节点数、弱化次要连线、限制标签，以及按需加载子网来改善可读性；聚类分组可由数据预处理或自定义逻辑实现。

具体参考：Highcharts Network Graph 文档。

在下一部分中，我们将进一步探讨如何将关系网络图与真实业务数据结合，包括数据预处理、动态更新节点与连线、以及如何把网络图嵌入到更复杂的仪表盘或交互式页面中，敬请期待。