如何在Svelte/SvelteKit中正确集成使用sigma.js

sigma.js 本身是无框架依赖的原生JS图库，强依赖浏览器DOM API，SvelteKit 中做客户端隔离加载的思路完全合理，加载失败基本是SSR执行、容器无尺寸、初始化时机错误这几个原因导致的，下面是可直接运行的最小实现：

前置依赖安装 #

sigma.js 官方推荐搭配 graphology 做图数据管理，先安装两个依赖：

npm install sigma graphology
# 用pnpm/yarn的话替换对应包管理器命令即可

编写可复用Sigma组件 #

新建$lib/components/SigmaGraph.svelte文件，代码如下：

<!-- 标记组件全程仅客户端渲染，从根源避免服务端执行报错 -->
<svelte:options ssr={false} />

<div class="sigma-container" bind:this={container}></div>

<script>
	import { onMount } from 'svelte';
	import Sigma from 'sigma';
	import Graph from 'graphology';

	let container;
	let renderer;
	let graph;

	onMount(() => {
		// 初始化图数据实例
		graph = new Graph();

		// 添加测试节点、边数据
		graph.addNode('n1', { x: 0, y: 0, size: 15, color: '#f43f5e', label: '中心节点' });
		graph.addNode('n2', { x: 10, y: 3, size: 10, color: '#3b82f6', label: '节点A' });
		graph.addNode('n3', { x: -8, y: 6, size: 10, color: '#10b981', label: '节点B' });
		graph.addNode('n4', { x: 2, y: -9, size: 10, color: '#f59e0b', label: '节点C' });
		graph.addEdge('n1', 'n2', { size: 2, color: '#d1d5db' });
		graph.addEdge('n1', 'n3', { size: 2, color: '#d1d5db' });
		graph.addEdge('n1', 'n4', { size: 2, color: '#d1d5db' });

		// 初始化sigma渲染器，必须传入已挂载、有实际尺寸的DOM节点
		renderer = new Sigma(graph, container, {
			allowInvalidContainer: false,
			defaultEdgeColor: '#9ca3af'
		});

		// 组件销毁时回收实例，避免内存泄漏
		return () => {
			renderer.kill();
			graph.clear();
		};
	});
</script>

<style>
/* sigma容器必须设置明确宽高，否则初始化会因容器尺寸为0失败 */
.sigma-container {
	width: 100%;
	height: 600px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}
</style>

页面中引入使用 #

如果是SvelteKit 1.0+版本，组件已经标记ssr={false}，可以直接在页面导入使用：

<script>
	import SigmaGraph from '$lib/components/SigmaGraph.svelte';
</script>

<h3>sigma.js 图形效果演示</h3>
<SigmaGraph />

如果使用的SvelteKit版本不支持组件级ssr={false}标记，用动态导入方式做客户端隔离即可：

<script>
	import { onMount } from 'svelte';
	let SigmaGraph;

	onMount(async () => {
		const comp = await import('$lib/components/SigmaGraph.svelte');
		SigmaGraph = comp.default;
	});
</script>

<h3>sigma.js 图形效果演示</h3>
{#if SigmaGraph}
	<SigmaGraph />
{/if}

常见加载失败原因 #

• 未做SSR隔离，服务端渲染阶段执行sigma代码，触发window is not defined类报错
• sigma容器未设置明确宽高，DOM节点尺寸为0时初始化会直接失败
• 初始化时机过早，DOM节点还未完成挂载就传入sigma构造函数
• 未安装graphology依赖，sigma新版本默认依赖该库做图数据管理

不需要额外寻找第三方封装的Svelte sigma组件，sigma本身无框架依赖，直接在客户端生命周期对接原生API是最稳定、灵活度最高的实现方式，不存在实现逻辑不合理的问题。

内容的提问来源于stack exchange，提问作者Francisco Gama T. R.