D3 Force Directed Graph in Svelte

This project contains Svelte JS versions of the D3 Force Directed Graph example.

Svelte Implementations

Each Svelte version is implemented as a file/component which can be tested by modifying src/App.svelte to select the one you wish to try. Or you can view the code and a live example using the 'REPL' links below.

1. NetworkGraphSvelteSVG.svelte - uses Svelte SVG elements (REPL or REPL without d3-zoom*)

2. NetworkGraphD3SVG.svelte - uses D3 SVG elements (REPL)

3. NetworkGraphCanvas.svelte - uses canvas with D3 hit detection (REPL or REPL without d3-zoom)

4. NetworkGraphCanvasIdContext.svelte - uses canvas with a second context for hit detection (REPL or REPL without d3-zoom)

   * In (1) without zoom, I've added some axes but that's the only visual difference.

Performance

It will be interesting to see how the alternative hit detection methods of (3) and (4) compare. The former uses D3 simulation.find() while (4) uses a second idContext (drawing all the nodes a second time and using the colour of any hit to determine which node was hit).

Work to compare performance of the above can be found in d3-fdg-svelte-perf

Touch Screens

All should work with laptop, mobile and tablet touch screens (tested with Chrome and Firefox on Ubuntu and Android) but note:

It can be hard to hit the nodes with a fat finger on a small screen, so if you want to test or support mobile devices, you may have to enlarge the hit radius when the display is a small screen.

Get started

The conversions are based on the default sveltejs/template, so refer to that for more information. Note though, I have modified it to use yarn rather than npm, so the essential commands are given below.

Note that you will need to have Node.js and yarn installed.

Get the code...

git clone https://github.com/theWebalyst/d3-fdg-svelte

Install the dependencies...

cd d3-fdg-svelte
yarn

...then start Rollup:

yarn dev

Navigate to localhost:5000. You should see the app running.

More information

For more information about the template used to create this app, see the README at https://github.com/sveltejs/template.