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
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.
-
NetworkGraphSvelteSVG.svelte - uses Svelte
SVG
elements (REPL or REPL without d3-zoom*
) -
NetworkGraphD3SVG.svelte - uses D3
SVG
elements (REPL) -
NetworkGraphCanvas.svelte - uses
canvas
with D3 hit detection (REPL or REPL without d3-zoom) -
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.
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
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
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.
For more information about the template used to create this app, see the README at https://github.com/sveltejs/template.