@petitatelier/d3-force-graph

Defines the ‹d3-force-graph› element, a force directed graph, that layouts HTML and SVG as nodes

Usage no npm install needed!

<script type="module">
  import petitatelierD3ForceGraph from 'https://cdn.skypack.dev/@petitatelier/d3-force-graph';
</script>

README

D3-force-graph Component

example of force directed graph

An experiment around force directed graphs inspired by Disjoint Force-Directed Graph

Example of usage:

Using SVG primitives

<d3-force-graph>
 <svg slot="nodes">
   <circle id=1 r=10></circle>
   <circle id=2 r=10></circle>
   ...
 </svg>
 <svg slot="links">
   <link source=1 target=2></link>
 </svg>
</d3-force-graph>

Using HTML elements

<d3-force-graph>
 <div slot="nodes">
  <input id=1 type=text></input>
  <video id=2 src='...'></video>
   ...
 </svg>
 <svg slot="links">
   <link source=1 target=2></link>
 </svg>
</d3-force-graph>