https://github.com/albertaz1992/svelte-g6

Svelte Component for Graph Visualization Framework @antvis/g6
https://github.com/albertaz1992/svelte-g6

g6 svelte sveltejs

Last synced: 4 days ago
JSON representation

Svelte Component for Graph Visualization Framework @antvis/g6

• Host: GitHub
• URL: https://github.com/albertaz1992/svelte-g6
• Owner: AlbertAZ1992
• Created: 2021-07-22T12:12:02.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-03-06T06:40:13.000Z (over 1 year ago)
• Last Synced: 2024-09-29T09:24:06.504Z (4 days ago)
• Topics: g6, svelte, sveltejs
• Language: Svelte
• Homepage:
• Size: 131 KB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# svelte-g6

A Svelte component for [@antv/g6](https://github.com/antvis/g6)

Inspired by [g6-in-react](https://github.com/baizn/g6-in-react)

[![minified + gzip](https://badgen.net/bundlephobia/minzip/svelte-g6)](https://bundlephobia.com/result?p=svelte-g6)

[![tree-shakeable](https://badgen.net/bundlephobia/tree-shaking/svelte-g6)](https://bundlephobia.com/result?p=svelte-g6)

[![no dependencies](https://badgen.net/bundlephobia/dependency-count/svelte-g6)](https://bundlephobia.com/result?p=svelte-g6)



  

  



## Installation

```

yarn add svelte-g6

# or

npm install --save svelte-g6

```

## Usage

```html

  import G6 from '@antv/g6';

  import G6Component from 'svelte-g6';

  const options = {

    container: 'mountNode',

    width: 400,

    height: 400,

    workerEnabled: false,

  };

  const data = {

    nodes: [

      {

        id: 'node1',

        x: 100,

        y: 200,

        },

      {

        id: 'node2',

        x: 300,

        y: 200,

      },

    ],

    edges: [

      {

        source: 'node1',

        target: 'node2',

      },

    ],

  };

```

[![Edit compassionate-lalande-5lxm7](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/cocky-dust-xz09t?file=/App.svelte)