3d-force-graph 1.74.1 → 1.74.3

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 (17) hide show
  1. package/dist/3d-force-graph.d.ts +4 -2
  2. package/dist/3d-force-graph.js +1 -1
  3. package/dist/3d-force-graph.min.js +1 -1
  4. package/example/bloom-effect/index.html +1 -2
  5. package/example/collision-detection/index.html +4 -5
  6. package/example/custom-node-geometry/index.html +1 -1
  7. package/example/dag-yarn/index.html +5 -7
  8. package/example/gradient-links/index.html +4 -5
  9. package/example/html-nodes/index.html +1 -2
  10. package/example/img-nodes/index.html +1 -1
  11. package/example/manipulate-link-force/index.html +4 -3
  12. package/example/responsive/index.html +3 -3
  13. package/example/scene/index.html +1 -1
  14. package/example/text-links/index.html +1 -2
  15. package/example/text-nodes/index.html +1 -2
  16. package/example/tree/index.html +8 -9
  17. package/package.json +1 -1
package/example/bloom-effect/index.html CHANGED
@@ -8,9 +8,8 @@
8
8
  <body>
9
9
  <div id="3d-graph"></div>
10
10
 
11
- <script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
12
11
  <script type="module">
13
- import { UnrealBloomPass } from '//unpkg.com/three/examples/jsm/postprocessing/UnrealBloomPass.js';
12
+ import { UnrealBloomPass } from 'https://esm.sh/three/examples/jsm/postprocessing/UnrealBloomPass.js';
14
13
 
15
14
  const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
16
15
  .backgroundColor('#000003')
package/example/collision-detection/index.html CHANGED
@@ -3,15 +3,14 @@
3
3
 
4
4
  <script src="//unpkg.com/3d-force-graph"></script>
5
5
  <!--<script src="../../dist/3d-force-graph.js"></script>-->
6
-
7
- <script src="//unpkg.com/d3-octree"></script>
8
- <script src="//unpkg.com/d3-force-3d"></script>
9
6
  </head>
10
7
 
11
8
  <body>
12
9
  <div id="3d-graph"></div>
13
10
 
14
- <script>
11
+ <script type="module">
12
+ import { forceCollide } from 'https://esm.sh/d3-force-3d';
13
+
15
14
  const N = 50;
16
15
  const nodes = [...Array(N).keys()].map(() => ({
17
16
  // Initial velocity in random direction
@@ -31,7 +30,7 @@
31
30
  .d3Force('charge', null)
32
31
 
33
32
  // Add collision and bounding box forces
34
- .d3Force('collide', d3.forceCollide(Graph.nodeRelSize()))
33
+ .d3Force('collide', forceCollide(Graph.nodeRelSize()))
35
34
  .d3Force('box', () => {
36
35
  const CUBE_HALF_SIDE = Graph.nodeRelSize() * N * 0.5;
37
36
 
package/example/custom-node-geometry/index.html CHANGED
@@ -9,7 +9,7 @@
9
9
  <div id="3d-graph"></div>
10
10
 
11
11
  <script type="module">
12
- import * as THREE from '//unpkg.com/three/build/three.module.js';
12
+ import * as THREE from 'https://esm.sh/three';
13
13
 
14
14
  // Random tree
15
15
  const N = 100;
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-octree"></script>
7
- <script src="//unpkg.com/d3-force-3d"></script>
8
5
 
9
6
  <script src="//unpkg.com/3d-force-graph"></script>
10
7
  <!--<script src="../../dist/3d-force-graph.js"></script>-->
@@ -13,13 +10,14 @@
13
10
  <body>
14
11
  <div id="graph"></div>
15
12
 
16
- <script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
17
13
  <script type="module">
18
- import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
14
+ import SpriteText from 'https://esm.sh/three-spritetext';
15
+ import { forceCollide } from 'https://esm.sh/d3-force-3d';
16
+ import { GUI } from 'https://esm.sh/dat.gui';
19
17
 
20
18
  // controls
21
19
  const controls = { 'DAG Orientation': 'lr'};
22
- const gui = new dat.GUI();
20
+ const gui = new GUI();
23
21
  gui.add(controls, 'DAG Orientation', ['lr', 'td', 'zout', 'radialout', null])
24
22
  .onChange(orientation => graph && graph.dagMode(orientation));
25
23
 
@@ -39,7 +37,7 @@
39
37
  sprite.textHeight = 8;
40
38
  return sprite;
41
39
  })
42
- .d3Force('collide', d3.forceCollide(13))
40
+ .d3Force('collide', forceCollide(13))
43
41
  .d3AlphaDecay(0.02)
44
42
  .d3VelocityDecay(0.3);
45
43
 
package/example/gradient-links/index.html CHANGED
@@ -1,8 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/d3"></script>
5
-
6
4
  <script src="//unpkg.com/3d-force-graph"></script>
7
5
  <!--<script src="../../dist/3d-force-graph.js"></script>-->
8
6
  </head>
@@ -11,7 +9,8 @@
11
9
  <div id="3d-graph"></div>
12
10
 
13
11
  <script type="module">
14
- import * as THREE from '//unpkg.com/three/build/three.module.js';
12
+ import * as THREE from 'https://esm.sh/three';
13
+ import { scaleOrdinal, schemeRdYlGn, color as d3Color } from 'https://esm.sh/d3';
15
14
 
16
15
  // Random tree
17
16
  const N = 25;
@@ -25,7 +24,7 @@
25
24
  }))
26
25
  };
27
26
 
28
- const nodeColorScale = d3.scaleOrdinal(d3.schemeRdYlGn[4]);
27
+ const nodeColorScale = scaleOrdinal(schemeRdYlGn[4]);
29
28
 
30
29
  const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
31
30
  .nodeColor(node => nodeColorScale(node.id))
@@ -39,7 +38,7 @@
39
38
  const colors = new Float32Array([].concat(
40
39
  ...[link.source, link.target]
41
40
  .map(nodeColorScale)
42
- .map(d3.color)
41
+ .map(d3Color)
43
42
  .map(({ r, g, b }) => [r, g, b].map(v => v / 255)
44
43
  )));
45
44
 
package/example/html-nodes/index.html CHANGED
@@ -18,9 +18,8 @@
18
18
  <body>
19
19
  <div id="3d-graph"></div>
20
20
 
21
- <script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
22
21
  <script type="module">
23
- import { CSS2DRenderer, CSS2DObject } from '//unpkg.com/three/examples/jsm/renderers/CSS2DRenderer.js';
22
+ import { CSS2DRenderer, CSS2DObject } from 'https://esm.sh/three/examples/jsm/renderers/CSS2DRenderer.js';
24
23
 
25
24
  const Graph = new ForceGraph3D(document.getElementById('3d-graph'), {
26
25
  extraRenderers: [new CSS2DRenderer()]
package/example/img-nodes/index.html CHANGED
@@ -9,7 +9,7 @@
9
9
  <div id="3d-graph"></div>
10
10
 
11
11
  <script type="module">
12
- import * as THREE from '//unpkg.com/three/build/three.module.js';
12
+ import * as THREE from 'https://esm.sh/three';
13
13
 
14
14
  const imgs = ['cat.jpg', 'dog.jpg', 'eagle.jpg', 'elephant.jpg', 'grasshopper.jpg', 'octopus.jpg', 'owl.jpg', 'panda.jpg', 'squirrel.jpg', 'tiger.jpg', 'whale.jpg'];
15
15
 
package/example/manipulate-link-force/index.html CHANGED
@@ -1,7 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/dat.gui"></script>
5
4
  <script src="//unpkg.com/3d-force-graph"></script>
6
5
  <!-- <script src="../../dist/3d-force-graph.js"></script> -->
7
6
  </head>
@@ -9,7 +8,9 @@
9
8
  <body>
10
9
  <div id="3d-graph"></div>
11
10
 
12
- <script>
11
+ <script type="module">
12
+ import { GUI } from 'https://esm.sh/dat.gui';
13
+
13
14
  // Create Random tree
14
15
  const N = 20;
15
16
  const gData = {
@@ -40,7 +41,7 @@
40
41
  };
41
42
 
42
43
  const settings = new Settings();
43
- const gui = new dat.GUI();
44
+ const gui = new GUI();
44
45
 
45
46
  const controllerOne = gui.add(settings, 'redDistance', 0, 100);
46
47
  const controllerTwo = gui.add(settings, 'greenDistance', 0, 100);
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/3d-force-graph"></script>
7
5
  <!-- <script src="../../dist/3d-force-graph.js"></script>-->
8
6
  </head>
@@ -10,7 +8,9 @@
10
8
  <body>
11
9
  <div id="3d-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 = 300;
16
16
  const gData = {
package/example/scene/index.html CHANGED
@@ -9,7 +9,7 @@
9
9
  <div id="3d-graph"></div>
10
10
 
11
11
  <script type="module">
12
- import * as THREE from '//unpkg.com/three/build/three.module.js';
12
+ import * as THREE from 'https://esm.sh/three';
13
13
 
14
14
  // Random tree
15
15
  const N = 30;
package/example/text-links/index.html CHANGED
@@ -8,9 +8,8 @@
8
8
  <body>
9
9
  <div id="3d-graph"></div>
10
10
 
11
- <script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
12
11
  <script type="module">
13
- import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
12
+ import SpriteText from "https://esm.sh/three-spritetext";
14
13
 
15
14
  const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
16
15
  .jsonUrl('../datasets/miserables.json')
package/example/text-nodes/index.html CHANGED
@@ -8,9 +8,8 @@
8
8
  <body>
9
9
  <div id="3d-graph"></div>
10
10
 
11
- <script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
12
11
  <script type="module">
13
- import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
12
+ import SpriteText from "https://esm.sh/three-spritetext";
14
13
 
15
14
  const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
16
15
  .jsonUrl('../datasets/miserables.json')
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-octree"></script>
7
- <script src="//unpkg.com/d3-force-3d"></script>
8
-
9
4
  <script src="//unpkg.com/3d-force-graph"></script>
10
5
  <!--<script src="../../dist/3d-force-graph.js"></script>-->
11
6
  </head>
@@ -13,10 +8,14 @@
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-3d';
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', 'zout', 'zin', 'radialout', 'radialin', null])
21
20
  .onChange(orientation => graph && graph.dagMode(orientation));
22
21
 
@@ -36,7 +35,7 @@
36
35
  .linkDirectionalParticles(2)
37
36
  .linkDirectionalParticleWidth(0.8)
38
37
  .linkDirectionalParticleSpeed(0.006)
39
- .d3Force('collision', d3.forceCollide(node => Math.cbrt(node.size) * NODE_REL_SIZE))
38
+ .d3Force('collision', forceCollide(node => Math.cbrt(node.size) * NODE_REL_SIZE))
40
39
  .d3VelocityDecay(0.3);
41
40
 
42
41
  // Decrease repel intensity
@@ -44,7 +43,7 @@
44
43
 
45
44
  fetch('../datasets/d3-dependencies.csv')
46
45
  .then(r => r.text())
47
- .then(d3.csvParse)
46
+ .then(csvParse)
48
47
  .then(data => {
49
48
  const nodes = [], links = [];
50
49
  data.forEach(({ size, path }) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "3d-force-graph",
3
- "version": "1.74.1",
3
+ "version": "1.74.3",
4
4
  "description": "UI component for a 3D force-directed graph using ThreeJS and d3-force-3d layout engine",
5
5
  "type": "module",
6
6
  "unpkg": "dist/3d-force-graph.min.js",