force-graph 1.46.0 → 1.47.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/README.md +1 -2
  2. package/dist/force-graph.d.ts +4 -6
  3. package/dist/force-graph.js +13 -5
  4. package/dist/force-graph.js.map +1 -1
  5. package/dist/force-graph.min.js +2 -2
  6. package/example/auto-colored/index.html +1 -2
  7. package/example/basic/index.html +1 -1
  8. package/example/beeswarm/index.html +7 -9
  9. package/example/build-a-graph/index.html +1 -2
  10. package/example/click-to-focus/index.html +1 -1
  11. package/example/collision-detection/index.html +5 -7
  12. package/example/curved-links/index.html +1 -2
  13. package/example/curved-links-computed-curvature/index.html +1 -2
  14. package/example/custom-node-shape/index.html +1 -2
  15. package/example/dag-yarn/index.html +11 -12
  16. package/example/dagre/index.html +8 -8
  17. package/example/dash-odd-links/index.html +1 -1
  18. package/example/directional-links-arrows/index.html +1 -2
  19. package/example/directional-links-particles/index.html +1 -2
  20. package/example/dynamic/index.html +1 -1
  21. package/example/emit-particles/index.html +1 -2
  22. package/example/expandable-nodes/index.html +1 -1
  23. package/example/expandable-tree/index.html +7 -9
  24. package/example/fit-to-canvas/index.html +1 -2
  25. package/example/fix-dragged-nodes/index.html +1 -2
  26. package/example/highlight/index.html +1 -1
  27. package/example/huge-1M/index.html +1 -2
  28. package/example/img-nodes/index.html +1 -2
  29. package/example/large-graph/index.html +1 -2
  30. package/example/load-json/index.html +1 -2
  31. package/example/medium-graph/index.html +1 -1
  32. package/example/move-viewport/index.html +1 -2
  33. package/example/multi-selection/index.html +1 -2
  34. package/example/responsive/index.html +4 -5
  35. package/example/text-links/index.html +1 -2
  36. package/example/text-nodes/index.html +1 -2
  37. package/example/tree/index.html +10 -12
  38. package/package.json +5 -5
  39. package/src/index.d.ts +3 -5
package/example/auto-colored/index.html CHANGED
@@ -25,8 +25,7 @@
25
25
  }))
26
26
  }
27
27
 
28
- const Graph = ForceGraph()
29
- (document.getElementById('graph'))
28
+ const Graph = new ForceGraph(document.getElementById('graph'))
30
29
  .nodeAutoColorBy('group')
31
30
  .linkAutoColorBy(d => gData.nodes[d.source].group)
32
31
  .graphData(gData);
package/example/basic/index.html CHANGED
@@ -21,7 +21,7 @@
21
21
  }))
22
22
  };
23
23
 
24
- const Graph = ForceGraph()
24
+ const Graph = new ForceGraph()
25
25
  (document.getElementById('graph'))
26
26
  .linkDirectionalParticles(2)
27
27
  .graphData(gData);
package/example/beeswarm/index.html CHANGED
@@ -3,15 +3,14 @@
3
3
 
4
4
  <script src="//unpkg.com/force-graph"></script>
5
5
  <!--<script src="../../dist/force-graph.js"></script>-->
6
-
7
- <script src="//unpkg.com/d3-quadtree"></script>
8
- <script src="//unpkg.com/d3-force"></script>
9
6
  </head>
10
7
 
11
8
  <body>
12
9
  <div id="graph"></div>
13
10
 
14
- <script>
11
+ <script type="module">
12
+ import { forceCollide, forceX, forceY } from 'https://esm.sh/d3-force';
13
+
15
14
  // Random tree
16
15
  const N = 300;
17
16
  const nodes = [...Array(N).keys()].map(i => ({
@@ -19,8 +18,7 @@
19
18
  pos: Math.random()
20
19
  }));
21
20
 
22
- const Graph = ForceGraph()
23
- (document.getElementById('graph'));
21
+ const Graph = new ForceGraph(document.getElementById('graph'));
24
22
 
25
23
  Graph
26
24
  // Deactivate existing forces
@@ -28,9 +26,9 @@
28
26
  .d3Force('charge', null)
29
27
 
30
28
  // Add collision and x/y forces
31
- .d3Force('collide', d3.forceCollide(Graph.nodeRelSize()))
32
- .d3Force('x', d3.forceX(d => (d.pos - 0.5) * window.innerWidth))
33
- .d3Force('y', d3.forceY(0).strength(0.2))
29
+ .d3Force('collide', forceCollide(Graph.nodeRelSize()))
30
+ .d3Force('x', forceX(d => (d.pos - 0.5) * window.innerWidth))
31
+ .d3Force('y', forceY(0).strength(0.2))
34
32
 
35
33
  // Add nodes
36
34
  .graphData({ nodes, links: [] });
package/example/build-a-graph/index.html CHANGED
@@ -59,8 +59,7 @@
59
59
  nodes.splice(nodes.indexOf(node), 1);
60
60
  };
61
61
 
62
- const Graph = ForceGraph()
63
- (document.getElementById('graph'))
62
+ const Graph = new ForceGraph(document.getElementById('graph'))
64
63
  .linkDirectionalArrowLength(6)
65
64
  .linkDirectionalArrowRelPos(1)
66
65
  .onNodeDrag(dragNode => {
package/example/click-to-focus/index.html CHANGED
@@ -12,7 +12,7 @@
12
12
  fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
13
13
  const elem = document.getElementById('graph');
14
14
 
15
- const Graph = ForceGraph()(elem)
15
+ const Graph = new ForceGraph(elem)
16
16
  .graphData(data)
17
17
  .nodeLabel('id')
18
18
  .nodeAutoColorBy('group')
package/example/collision-detection/index.html CHANGED
@@ -3,15 +3,14 @@
3
3
 
4
4
  <script src="//unpkg.com/force-graph"></script>
5
5
  <!--<script src="../../dist/force-graph.js"></script>-->
6
-
7
- <script src="//unpkg.com/d3-quadtree"></script>
8
- <script src="//unpkg.com/d3-force"></script>
9
6
  </head>
10
7
 
11
8
  <body>
12
9
  <div id="graph"></div>
13
10
 
14
- <script>
11
+ <script type="module">
12
+ import { forceCollide } from 'https://esm.sh/d3-force';
13
+
15
14
  const N = 80;
16
15
  const nodes = [...Array(N).keys()].map(() => ({
17
16
  // Initial velocity in random direction
@@ -19,8 +18,7 @@
19
18
  vy: (Math.random() * 2) - 1
20
19
  }));
21
20
 
22
- const Graph = ForceGraph()
23
- (document.getElementById('graph'));
21
+ const Graph = new ForceGraph(document.getElementById('graph'));
24
22
 
25
23
  Graph.cooldownTime(Infinity)
26
24
  .d3AlphaDecay(0)
@@ -31,7 +29,7 @@
31
29
  .d3Force('charge', null)
32
30
 
33
31
  // Add collision and bounding box forces
34
- .d3Force('collide', d3.forceCollide(Graph.nodeRelSize()))
32
+ .d3Force('collide', forceCollide(Graph.nodeRelSize()))
35
33
  .d3Force('box', () => {
36
34
  const SQUARE_HALF_SIDE = Graph.nodeRelSize() * N * 0.5;
37
35
 
package/example/curved-links/index.html CHANGED
@@ -28,8 +28,7 @@
28
28
  ]
29
29
  };
30
30
 
31
- const Graph = ForceGraph()
32
- (document.getElementById('graph'))
31
+ const Graph = new ForceGraph(document.getElementById('graph'))
33
32
  .linkDirectionalParticles(2)
34
33
  .linkCurvature('curvature')
35
34
  .graphData(gData);
package/example/curved-links-computed-curvature/index.html CHANGED
@@ -66,8 +66,7 @@
66
66
  }
67
67
  });
68
68
 
69
- const Graph = ForceGraph()
70
- (document.getElementById('graph'))
69
+ const Graph = new ForceGraph(document.getElementById('graph'))
71
70
  .linkCurvature('curvature')
72
71
  .linkDirectionalArrowLength(6)
73
72
  .linkDirectionalArrowRelPos(1)
package/example/custom-node-shape/index.html CHANGED
@@ -24,8 +24,7 @@
24
24
  // gen a number persistent color from around the palette
25
25
  const getColor = n => '#' + ((n * 1234567) % Math.pow(2, 24)).toString(16).padStart(6, '0');
26
26
 
27
- const Graph = ForceGraph()
28
- (document.getElementById('graph'))
27
+ const Graph = new ForceGraph(document.getElementById('graph'))
29
28
  .nodeCanvasObject((node, ctx) => nodePaint(node, getColor(node.id), ctx))
30
29
  .nodePointerAreaPaint(nodePaint)
31
30
  .nodeLabel('id')
package/example/dag-yarn/index.html CHANGED
@@ -2,9 +2,6 @@
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
4
  <script src="//bundle.run/@yarnpkg/lockfile@1.1.0"></script>
5
- <script src="//unpkg.com/dat.gui"></script>
6
- <script src="//unpkg.com/d3-quadtree"></script>
7
- <script src="//unpkg.com/d3-force"></script>
8
5
 
9
6
  <script src="//unpkg.com/force-graph"></script>
10
7
  <!--<script src="../../dist/force-graph.js"></script>-->
@@ -13,15 +10,18 @@
13
10
  <body>
14
11
  <div id="graph"></div>
15
12
 
16
- <script>
13
+ <script type="module">
14
+ import { forceCollide } from 'https://esm.sh/d3-force';
15
+ import { GUI } from 'https://esm.sh/dat.gui';
16
+
17
17
  // controls
18
18
  const controls = { 'DAG Orientation': 'lr'};
19
- const gui = new dat.GUI();
19
+ const gui = new GUI();
20
20
  gui.add(controls, 'DAG Orientation', ['lr', 'td', 'radialout', null])
21
21
  .onChange(orientation => graph && graph.dagMode(orientation));
22
22
 
23
23
  // graph config
24
- const graph = ForceGraph()
24
+ const graph = new ForceGraph(document.getElementById('graph'))
25
25
  .backgroundColor('#101020')
26
26
  .linkColor(() => 'rgba(255,255,255,0.2)')
27
27
  .dagMode('lr')
@@ -61,7 +61,7 @@
61
61
  const bckgDimensions = node.__bckgDimensions;
62
62
  bckgDimensions && ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
63
63
  })
64
- .d3Force('collide', d3.forceCollide(13))
64
+ .d3Force('collide', forceCollide(13))
65
65
  .d3AlphaDecay(0.02)
66
66
  .d3VelocityDecay(0.3);
67
67
 
@@ -76,21 +76,20 @@
76
76
  const nodes = [];
77
77
  const links = [];
78
78
 
79
- Object.entries(yarnlock).forEach(([package, details]) => {
79
+ Object.entries(yarnlock).forEach(([pkg, details]) => {
80
80
  nodes.push({
81
- package,
81
+ package: pkg,
82
82
  version: details.version
83
83
  });
84
84
 
85
85
  if (details.dependencies) {
86
86
  Object.entries(details.dependencies).forEach(([dep, version]) => {
87
- links.push({source: package, target: `${dep}@${version}`});
87
+ links.push({source: pkg, target: `${dep}@${version}`});
88
88
  });
89
89
  }
90
90
  });
91
91
 
92
- graph(document.getElementById('graph'))
93
- .graphData({ nodes, links });
92
+ graph.graphData({ nodes, links });
94
93
  });
95
94
  </script>
96
95
  </body>
package/example/dagre/index.html CHANGED
@@ -3,9 +3,6 @@
3
3
 
4
4
  <script src="//bundle.run/@yarnpkg/lockfile@1.1.0"></script>
5
5
 
6
- <script src="//unpkg.com/dagre/dist/dagre.min.js"></script>
7
- <script src="//unpkg.com/accessor-fn"></script>
8
-
9
6
  <script src="//unpkg.com/force-graph"></script>
10
7
  <!-- <script src="../../dist/force-graph.js"></script>-->
11
8
  </head>
@@ -13,8 +10,11 @@
13
10
  <body>
14
11
  <div id="graph"></div>
15
12
 
16
- <script>
17
- const Graph = ForceGraph()(document.getElementById('graph'))
13
+ <script type="module">
14
+ import dagre from 'https://esm.sh/dagre';
15
+ import accessorFn from 'https://esm.sh/accessor-fn';
16
+
17
+ const Graph = new ForceGraph(document.getElementById('graph'))
18
18
  .nodeId('id')
19
19
  .nodeLabel('id')
20
20
  .cooldownTicks(0) // pre-defined layout, cancel force engine iterations
@@ -37,11 +37,11 @@
37
37
  .then(yarnlock => {
38
38
  const nodes = [];
39
39
  const links = [];
40
- Object.entries(yarnlock).forEach(([package, details]) => {
41
- nodes.push({ id: package });
40
+ Object.entries(yarnlock).forEach(([pkg, details]) => {
41
+ nodes.push({ id: pkg });
42
42
  if (details.dependencies) {
43
43
  Object.entries(details.dependencies).forEach(([dep, version]) => {
44
- links.push({source: package, target: `${dep}@${version}`});
44
+ links.push({source: pkg, target: `${dep}@${version}`});
45
45
  });
46
46
  }
47
47
  });
package/example/dash-odd-links/index.html CHANGED
@@ -27,7 +27,7 @@
27
27
  const dashLen = 6;
28
28
  const gapLen = 8;
29
29
 
30
- const Graph = ForceGraph()(elem)
30
+ const Graph = new ForceGraph(elem)
31
31
  .graphData(gData)
32
32
  .nodeRelSize(8)
33
33
  .linkWidth(3)
package/example/directional-links-arrows/index.html CHANGED
@@ -21,8 +21,7 @@
21
21
  }))
22
22
  };
23
23
 
24
- const Graph = ForceGraph()
25
- (document.getElementById('graph'))
24
+ const Graph = new ForceGraph(document.getElementById('graph'))
26
25
  .graphData(gData)
27
26
  .linkDirectionalArrowLength(6);
28
27
  </script>
package/example/directional-links-particles/index.html CHANGED
@@ -10,8 +10,7 @@
10
10
 
11
11
  <script>
12
12
  fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
13
- const Graph = ForceGraph()
14
- (document.getElementById('graph'))
13
+ const Graph = new ForceGraph(document.getElementById('graph'))
15
14
  .graphData(data)
16
15
  .nodeLabel('id')
17
16
  .nodeAutoColorBy('group')
package/example/dynamic/index.html CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  const elem = document.getElementById("graph");
18
18
 
19
- const Graph = ForceGraph()(elem)
19
+ const Graph = new ForceGraph(elem)
20
20
  .onNodeClick(removeNode)
21
21
  .graphData(initData);
22
22
 
package/example/emit-particles/index.html CHANGED
@@ -32,8 +32,7 @@
32
32
  links
33
33
  };
34
34
 
35
- const Graph = ForceGraph()
36
- (document.getElementById('graph'))
35
+ const Graph = new ForceGraph(document.getElementById('graph'))
37
36
  .linkDirectionalParticleColor(() => 'red')
38
37
  .linkHoverPrecision(10)
39
38
  .graphData(gData);
package/example/expandable-nodes/index.html CHANGED
@@ -50,7 +50,7 @@
50
50
  };
51
51
 
52
52
  const elem = document.getElementById('graph');
53
- const Graph = ForceGraph()(elem)
53
+ const Graph = new ForceGraph(elem)
54
54
  .graphData(getPrunedTree())
55
55
  .onNodeHover(node => elem.style.cursor = node && node.childLinks.length ? 'pointer' : null)
56
56
  .onNodeClick(node => {
package/example/expandable-tree/index.html CHANGED
@@ -1,10 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/d3-dsv"></script>
5
- <script src="//unpkg.com/d3-quadtree"></script>
6
- <script src="//unpkg.com/d3-force"></script>
7
-
8
4
  <script src="//unpkg.com/force-graph"></script>
9
5
  <!--<script src="../../dist/force-graph.js"></script>-->
10
6
 
@@ -16,8 +12,11 @@
16
12
  <body>
17
13
  <div id="graph"></div>
18
14
 
19
- <script>
20
- fetch('../datasets/d3-dependencies.csv').then(r => r.text()).then(d3.csvParse).then(data => {
15
+ <script type="module">
16
+ import { forceCollide } from 'https://esm.sh/d3-force';
17
+ import { csvParse } from 'https://esm.sh/d3-dsv';
18
+
19
+ fetch('../datasets/d3-dependencies.csv').then(r => r.text()).then(csvParse).then(data => {
21
20
  const nodes = [], links = [];
22
21
  data.forEach(({ size, path }) => {
23
22
  const levels = path.split('/'),
@@ -66,8 +65,7 @@
66
65
  };
67
66
 
68
67
  const elem = document.getElementById('graph');
69
- const Graph = ForceGraph()
70
- (elem)
68
+ const Graph = new ForceGraph(elem)
71
69
  .graphData(getPrunedTree())
72
70
  .nodeLabel('id')
73
71
  .nodeColor(node => !node.childLinks.length ? 'green' : node.collapsed ? 'red' : 'yellow')
@@ -78,7 +76,7 @@
78
76
  })
79
77
  .dagMode('td')
80
78
  .dagLevelDistance(90)
81
- .d3Force('collision', d3.forceCollide(node => Graph.nodeRelSize()))
79
+ .d3Force('collision', forceCollide(node => Graph.nodeRelSize()))
82
80
  .warmupTicks(250);
83
81
  });
84
82
  </script>
package/example/fit-to-canvas/index.html CHANGED
@@ -21,8 +21,7 @@
21
21
  }))
22
22
  };
23
23
 
24
- const Graph = ForceGraph()
25
- (document.getElementById('graph'))
24
+ const Graph = new ForceGraph(document.getElementById('graph'))
26
25
  .cooldownTicks(100)
27
26
  .graphData(gData);
28
27
 
package/example/fix-dragged-nodes/index.html CHANGED
@@ -10,8 +10,7 @@
10
10
 
11
11
  <script>
12
12
  fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
13
- const Graph = ForceGraph()
14
- (document.getElementById('graph'))
13
+ const Graph = new ForceGraph(document.getElementById('graph'))
15
14
  .graphData(data)
16
15
  .nodeLabel('id')
17
16
  .nodeAutoColorBy('group')
package/example/highlight/index.html CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
  const elem = document.getElementById('graph');
46
46
 
47
- ForceGraph()(elem)
47
+ new ForceGraph(elem)
48
48
  .graphData(gData)
49
49
  .nodeRelSize(NODE_R)
50
50
  .onNodeHover(node => {
package/example/huge-1M/index.html CHANGED
@@ -23,8 +23,7 @@
23
23
  }))
24
24
  };
25
25
 
26
- const Graph = ForceGraph()
27
- (document.getElementById('graph'))
26
+ const Graph = new ForceGraph(document.getElementById('graph'))
28
27
  .linkColor(() => 'rgba(0,0,0,0.04)')
29
28
  .enablePointerInteraction(false)
30
29
  .d3AlphaDecay(0)
package/example/img-nodes/index.html CHANGED
@@ -27,8 +27,7 @@
27
27
  }))
28
28
  };
29
29
 
30
- const Graph = ForceGraph()
31
- (document.getElementById('graph'))
30
+ const Graph = new ForceGraph(document.getElementById('graph'))
32
31
  .nodeCanvasObject(({ img, x, y }, ctx) => {
33
32
  const size = 12;
34
33
  ctx.drawImage(img, x - size / 2, y - size / 2, size, size);
package/example/large-graph/index.html CHANGED
@@ -27,8 +27,7 @@
27
27
  const links = pairs.filter(d => d[0] !== d[1])
28
28
  .map(d => ({ source: d[0], target: d[1] }));
29
29
 
30
- const Graph = ForceGraph()
31
- (document.getElementById('graph'))
30
+ const Graph = new ForceGraph(document.getElementById('graph'))
32
31
  .graphData({ nodes, links })
33
32
  .d3AlphaDecay(0)
34
33
  .d3VelocityDecay(0.08)
package/example/load-json/index.html CHANGED
@@ -10,8 +10,7 @@
10
10
 
11
11
  <script>
12
12
  fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
13
- const Graph = ForceGraph()
14
- (document.getElementById('graph'))
13
+ const Graph = new ForceGraph(document.getElementById('graph'))
15
14
  .graphData(data)
16
15
  .nodeId('id')
17
16
  .nodeVal('val')
package/example/medium-graph/index.html CHANGED
@@ -12,7 +12,7 @@
12
12
  fetch('../datasets/blocks.json').then(res => res.json()).then(data => {
13
13
  const elem = document.getElementById('graph');
14
14
 
15
- const Graph = ForceGraph()(elem)
15
+ const Graph = new ForceGraph(elem)
16
16
  .backgroundColor('#101020')
17
17
  .nodeRelSize(6)
18
18
  .nodeAutoColorBy('user')
package/example/move-viewport/index.html CHANGED
@@ -21,8 +21,7 @@
21
21
  }))
22
22
  };
23
23
 
24
- const Graph = ForceGraph()
25
- (document.getElementById('graph'))
24
+ const Graph = new ForceGraph(document.getElementById('graph'))
26
25
  .graphData(gData);
27
26
 
28
27
  let k = 0, angle = 0, radius = 300;
package/example/multi-selection/index.html CHANGED
@@ -23,8 +23,7 @@
23
23
 
24
24
  let selectedNodes = new Set();
25
25
 
26
- const Graph = ForceGraph()
27
- (document.getElementById('graph'))
26
+ const Graph = new ForceGraph(document.getElementById('graph'))
28
27
  .graphData(gData)
29
28
  .nodeRelSize(7)
30
29
  .nodeColor(node => selectedNodes.has(node) ? 'darkorange' : 'grey')
package/example/responsive/index.html CHANGED
@@ -1,8 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 30px; } </style>
3
3
 
4
- <script src="//unpkg.com/element-resize-detector/dist/element-resize-detector.min.js"></script>
5
-
6
4
  <script src="//unpkg.com/force-graph"></script>
7
5
  <!--<script src="../../dist/force-graph.js"></script>-->
8
6
  </head>
@@ -10,7 +8,9 @@
10
8
  <body>
11
9
  <div id="graph"></div>
12
10
 
13
- <script>
11
+ <script type="module">
12
+ import elementResizeDetectorMaker from 'https://esm.sh/element-resize-detector';
13
+
14
14
  // Random tree
15
15
  const N = 200;
16
16
  const gData = {
@@ -23,8 +23,7 @@
23
23
  }))
24
24
  };
25
25
 
26
- const Graph = ForceGraph()
27
- (document.getElementById('graph'))
26
+ const Graph = new ForceGraph(document.getElementById('graph'))
28
27
  .backgroundColor('#F5F5FF')
29
28
  .height(window.innerHeight - 60)
30
29
  .graphData(gData);
package/example/text-links/index.html CHANGED
@@ -10,8 +10,7 @@
10
10
 
11
11
  <script>
12
12
  fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
13
- const Graph = ForceGraph()
14
- (document.getElementById('graph'))
13
+ const Graph = new ForceGraph(document.getElementById('graph'))
15
14
  .graphData(data)
16
15
  .nodeId('id')
17
16
  .nodeLabel('id')
package/example/text-nodes/index.html CHANGED
@@ -10,8 +10,7 @@
10
10
 
11
11
  <script>
12
12
  fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
13
- const Graph = ForceGraph()
14
- (document.getElementById('graph'))
13
+ const Graph = new ForceGraph(document.getElementById('graph'))
15
14
  .graphData(data)
16
15
  .nodeId('id')
17
16
  .nodeAutoColorBy('group')
package/example/tree/index.html CHANGED
@@ -1,11 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/d3-dsv"></script>
5
- <script src="//unpkg.com/dat.gui"></script>
6
- <script src="//unpkg.com/d3-quadtree"></script>
7
- <script src="//unpkg.com/d3-force"></script>
8
-
9
4
  <script src="//unpkg.com/force-graph"></script>
10
5
  <!--<script src="../../dist/force-graph.js"></script>-->
11
6
  </head>
@@ -13,16 +8,20 @@
13
8
  <body>
14
9
  <div id="graph"></div>
15
10
 
16
- <script>
11
+ <script type="module">
12
+ import { csvParse } from 'https://esm.sh/d3-dsv';
13
+ import { forceCollide } from 'https://esm.sh/d3-force';
14
+ import { GUI } from 'https://esm.sh/dat.gui';
15
+
17
16
  // controls
18
17
  const controls = { 'DAG Orientation': 'td'};
19
- const gui = new dat.GUI();
18
+ const gui = new GUI();
20
19
  gui.add(controls, 'DAG Orientation', ['td', 'bu', 'lr', 'rl', 'radialout', 'radialin', null])
21
20
  .onChange(orientation => graph && graph.dagMode(orientation));
22
21
 
23
22
  // graph config
24
23
  const NODE_REL_SIZE = 1;
25
- const graph = ForceGraph()
24
+ const graph = new ForceGraph(document.getElementById('graph'))
26
25
  .dagMode('td')
27
26
  .dagLevelDistance(300)
28
27
  .backgroundColor('#101020')
@@ -34,12 +33,12 @@
34
33
  .nodeAutoColorBy('module')
35
34
  .linkDirectionalParticles(2)
36
35
  .linkDirectionalParticleWidth(2)
37
- .d3Force('collision', d3.forceCollide(node => Math.sqrt(100 / (node.level + 1)) * NODE_REL_SIZE))
36
+ .d3Force('collision', forceCollide(node => Math.sqrt(100 / (node.level + 1)) * NODE_REL_SIZE))
38
37
  .d3VelocityDecay(0.3);
39
38
 
40
39
  fetch('../datasets/d3-dependencies.csv')
41
40
  .then(r => r.text())
42
- .then(d3.csvParse)
41
+ .then(csvParse)
43
42
  .then(data => {
44
43
  const nodes = [], links = [];
45
44
  data.forEach(({ size, path }) => {
@@ -64,8 +63,7 @@
64
63
  }
65
64
  });
66
65
 
67
- graph(document.getElementById('graph'))
68
- .graphData({ nodes, links });
66
+ graph.graphData({ nodes, links });
69
67
  });
70
68
  </script>
71
69
  </body>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "force-graph",
3
- "version": "1.46.0",
3
+ "version": "1.47.1",
4
4
  "description": "2D force-directed graph rendered on HTML5 canvas",
5
5
  "type": "module",
6
6
  "unpkg": "dist/force-graph.min.js",
@@ -59,7 +59,7 @@
59
59
  "d3-selection": "2 - 3",
60
60
  "d3-zoom": "2 - 3",
61
61
  "index-array-by": "1",
62
- "kapsule": "^1.14",
62
+ "kapsule": "^1.16",
63
63
  "lodash-es": "4"
64
64
  },
65
65
  "devDependencies": {
@@ -69,12 +69,12 @@
69
69
  "@rollup/plugin-commonjs": "^28.0.1",
70
70
  "@rollup/plugin-node-resolve": "^15.3.0",
71
71
  "@rollup/plugin-terser": "^0.4.4",
72
- "postcss": "^8.4.47",
72
+ "postcss": "^8.4.49",
73
73
  "rimraf": "^6.0.1",
74
- "rollup": "^4.24.3",
74
+ "rollup": "^4.28.0",
75
75
  "rollup-plugin-dts": "^6.1.1",
76
76
  "rollup-plugin-postcss": "^4.0.2",
77
- "typescript": "^5.6.3"
77
+ "typescript": "^5.7.2"
78
78
  },
79
79
  "engines": {
80
80
  "node": ">=12"
package/src/index.d.ts CHANGED
@@ -36,8 +36,8 @@ interface ForceFn<N = NodeObject> {
36
36
  [key: string]: any;
37
37
  }
38
38
 
39
- export interface ForceGraphGenericInstance<ChainableInstance, N extends NodeObject = NodeObject, L extends LinkObject<N> = LinkObject<N>> {
40
- (element: HTMLElement): ChainableInstance;
39
+ export declare class ForceGraphGeneric<ChainableInstance, N extends NodeObject = NodeObject, L extends LinkObject<N> = LinkObject<N>> {
40
+ constructor(element: HTMLElement);
41
41
  resetProps(): ChainableInstance;
42
42
  _destructor(): void;
43
43
 
@@ -190,8 +190,6 @@ export interface ForceGraphGenericInstance<ChainableInstance, N extends NodeObje
190
190
  graph2ScreenCoords(x: number, y: number): { x: number, y: number };
191
191
  }
192
192
 
193
- export type ForceGraphInstance<NodeType = NodeObject, LinkType = LinkObject<NodeType>> = ForceGraphGenericInstance<ForceGraphInstance<NodeType, LinkType>, NodeType, LinkType>;
194
-
195
- declare function ForceGraph<NodeType = NodeObject, LinkType = LinkObject<NodeType>>(): ForceGraphInstance<NodeType, LinkType>;
193
+ declare class ForceGraph<NodeType = NodeObject, LinkType = LinkObject<NodeType>> extends ForceGraphGeneric<ForceGraph<NodeType, LinkType>, NodeType, LinkType> {}
196
194
 
197
195
  export default ForceGraph;