Svelte.js와 함께 Sigma.js를 사용하는 방법

Sigma.js에 대해 들어본 적이 있습니까? Science Po Médialab 팀에서 만든 라이브러리입니다. 몇 주 동안 우리는 이 라이브러리의 버전 2.0을 가지고 있었습니다.

제작자는 이를 다음과 같이 설명했습니다. "Sigma.js는 브라우저에서 네트워크 그래프를 렌더링하고 상호 작용하기 위한 최신 JavaScript 라이브러리입니다. 다목적 그래프 조작 라이브러리인 graphology와 공생하여 작동합니다."

Sigma.js는 WebGL을 사용하며 d3.js와 같은 다른 솔루션보다 더 빠르고 더 나은 성능을 제공합니다.

Sigma.js에 대한 자세한 내용은 here 또는 here에서 읽을 수 있습니다.

설명서에는 Sigma.js를 React.js 또는 Angular.js와 함께 사용하는 방법이 명시되어 있지만 Svelte와 함께 사용할 수 있는 솔루션이 없으므로 이 프레임워크로 사용해 보기로 했습니다.

먼저 svelte-sigma 애플리케이션을 만듭니다.

npm init vite svelte-sigma -- --template svelte
cd my-app
npm install
npm run dev

Sigma를 설치해야 하는 경우:

npm install graphology sigma

이제 App.svelte 파일을 변경하겠습니다.
설치된 패키지와 onMount 기능을 가져옵니다.

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

이제 내 작은 그래프를 익사시킬 컨테이너가 필요합니다.

<h1> Sigma graph exemple</h1>
<div id="sigma-container" />

다음과 같이 onMount를 상자에 넣습니다.

onMount(() => {
//here I take a div sigma-container
    const container1 =  document.getElementById("sigma-container");


      const graph = new Graph();
//here I create some nodes 
      graph.addNode("John", { x: 0, y: 10, size: 15, label: "John", color: "blue" });
      graph.addNode("Mary", { x: 10, y: 0, size: 10, label: "Mary", color: "green" });
      graph.addNode("Thomas", { x: 7, y: 9, size: 20, label: "Thomas", color: "red" });
      graph.addNode("Hannah", { x: -7, y: -6, size: 25, label: "Hannah", color: "teal" });

// here there are different relations between nodes. 
      graph.addEdge("John", "Mary");
      graph.addEdge("John", "Thomas");
      graph.addEdge("John", "Hannah");
      graph.addEdge("Hannah", "Thomas");
      graph.addEdge("Hannah", "Mary");

//this const render a graph in container
      const renderer = new Sigma(graph, container1);

  });

div 시그마 컨테이너의 스타일도 필요합니다(%보다 픽셀을 사용하는 것이 좋습니다).

<style>
  #sigma-container {
      width: 550px;
      height: 450px;
  }
</style>

모든 코드는 다음과 같습니다.

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

  onMount(() => {
    const container1 =  document.getElementById("sigma-container");


      const graph = new Graph();

      graph.addNode("John", { x: 0, y: 10, size: 15, label: "John", color: "blue" });
      graph.addNode("Mary", { x: 10, y: 0, size: 10, label: "Mary", color: "green" });
      graph.addNode("Thomas", { x: 7, y: 9, size: 20, label: "Thomas", color: "red" });
      graph.addNode("Hannah", { x: -7, y: -6, size: 25, label: "Hannah", color: "teal" });

      graph.addEdge("John", "Mary");
      graph.addEdge("John", "Thomas");
      graph.addEdge("John", "Hannah");
      graph.addEdge("Hannah", "Thomas");
      graph.addEdge("Hannah", "Mary");

      const renderer = new Sigma(graph, container1);

  });


</script>
<h1> Sigma graph exemple</h1>
<div id="sigma-container" />

<style>
  #sigma-container {
      width: 550px;
      height: 450px;
  }
</style>

그리고 이것을 브라우저에서 렌더링했습니다.



이 코드는 this example을 기반으로 합니다.

자신만의 예제를 만드는 행운을 빕니다.