D3 Force Directed Graph in Svelte
This project contains Svelte JS versions of the D3 Force Directed Graph example.
Each Svelte version is implemented as a file/component which can be tested
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.
NetworkGraph.svelte - uses
NetworkGraphCanvas.svelte - uses
canvaswith D3 hit detection (REPL)
NetworkGraphCanvasIdContext.svelte - uses
canvaswith a second context for hit detection (REPL)
*In (1) only, I've added some axes but that's the only visual difference.
I'm planning to add the ability to create much larger networks in order to do some
performance tests with tens to hundreds of thousands of nodes. It will be interesting
to see how the alternative hit detection methods of (2) and (3) compare. The former uses
simulation.find() while (3) uses a second
idContext (drawing all the nodes a second
time and using the colour of any hit to determine which node was hit).
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.
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
Get the code...
git clone https://github.com/theWebalyst/d3-fdg-svelte
Install the dependencies...
cd d3-fdg-svelte yarn
...then start Rollup:
Navigate to localhost:5000. You should see the app running.
For more information about the template used to create this app, see the README at https://github.com/sveltejs/template.