如何基于React Sigma实现ForceAtlas2服务端节点位置渲染及导出？

一、服务端：计算并导出节点位置 #

基于Node.js生态的graphology和graphology-layout-forceatlas2完成布局计算，无需额外语言环境依赖。

步骤与代码示例 #

1. 安装依赖

npm install graphology graphology-layout-forceatlas2

2. 加载图数据并执行布局计算

const Graph = require('graphology');
const forceAtlas2 = require('graphology-layout-forceatlas2');
const fs = require('fs');

// 1. 构造图实例（实际场景从数据库/文件读取真实业务数据）
const graph = new Graph();
graph.addNodesFrom([
  { id: 'n1', label: '节点A' },
  { id: 'n2', label: '节点B' },
  { id: 'n3', label: '节点C' },
  { id: 'n4', label: '节点D' }
]);
graph.addEdgesFrom([
  { source: 'n1', target: 'n2' },
  { source: 'n2', target: 'n3' },
  { source: 'n3', target: 'n4' },
  { source: 'n1', target: 'n4' }
]);

// 2. 配置ForceAtlas2参数并计算布局
const layoutConfig = {
  iterations: 1500, // 大图建议提高迭代次数，保证布局稳定性
  scalingRatio: 3.0, // 控制节点间距
  gravity: 1.2 // 防止节点过度分散
};
const computedLayout = forceAtlas2(graph, layoutConfig);

// 3. 导出布局数据（节点ID + 坐标）
const exportData = Object.entries(computedLayout).map(([nodeId, pos]) => ({
  id: nodeId,
  x: pos.x,
  y: pos.y
}));

// 4. 存储数据：写入JSON文件或存入数据库，供前端调用
fs.writeFileSync('./public/graph-layout.json', JSON.stringify(exportData));

二、前端React Sigma：直接加载预计算布局 #

React Sigma作为Sigma.js的React封装，直接使用服务端导出的坐标渲染，无需在前端运行ForceAtlas2。

步骤与代码示例 #

1. 安装依赖

npm install @react-sigma/core

2. 整合数据并渲染

import { Sigma, Nodes, Edges } from '@react-sigma/core';
import '@react-sigma/core/lib/react-sigma.css';
import layoutData from '../public/graph-layout.json';
import rawGraphData from './graph-data.json'; // 包含节点属性、边数据

const GraphViewer = () => {
  // 合并原始节点数据与预计算坐标
  const nodes = rawGraphData.nodes.map(node => {
    const matchedPos = layoutData.find(item => item.id === node.id);
    return {
      ...node,
      x: matchedPos.x,
      y: matchedPos.y,
      size: 12 // 自定义节点大小
    };
  });

  return (
    <div style={{ height: '700px', width: '100%' }}>
      <Sigma>
        <Nodes nodes={nodes} />
        <Edges edges={rawGraphData.edges} />
        {/* 无需启用前端布局，直接使用预计算坐标 */}
      </Sigma>
    </div>
  );
};

export default GraphViewer;

三、添加导出功能 #

前端可通过Sigma.js的API导出可视化结果为PNG/SVG，或导出布局数据供用户下载。

导出PNG示例 #

import { useSigma } from '@react-sigma/core';

const ExportControls = () => {
  const sigmaInstance = useSigma();

  const handleExportPNG = () => {
    sigmaInstance.getRenderer().exportToPNG({ background: '#ffffff' })
      .then(dataUrl => {
        const downloadLink = document.createElement('a');
        downloadLink.href = dataUrl;
        downloadLink.download = 'graph-export.png';
        downloadLink.click();
      });
  };

  return (
    <button onClick={handleExportPNG} style={{ margin: '10px' }}>
      导出PNG
    </button>
  );
};

export default ExportControls;

四、关键优化点 #

• 服务端缓存：若图数据不频繁更新，将布局结果存入缓存（如Redis），避免重复计算
• 坐标适配：若前端画布尺寸与服务端计算的坐标系差异大，可在前端统一缩放x、y值（如x: matchedPos.x * 0.5）
• 增量更新：当图数据部分修改时，仅重新计算受影响的节点，提升计算效率

内容的提问来源于stack exchange，提问作者DAMIEN