npm - force-graph - Versions diffs - 1.42.3 - Mend

force-graph 1.42.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 (64) hide show

package/LICENSE +21 -0
package/README.md +228 -0
package/dist/force-graph.common.js +1754 -0
package/dist/force-graph.d.ts +195 -0
package/dist/force-graph.js +12168 -0
package/dist/force-graph.js.map +1 -0
package/dist/force-graph.min.js +5 -0
package/dist/force-graph.module.js +1743 -0
package/example/auto-colored/index.html +34 -0
package/example/basic/index.html +29 -0
package/example/build-a-graph/index.html +108 -0
package/example/click-to-focus/index.html +28 -0
package/example/collision-detection/index.html +50 -0
package/example/curved-links/index.html +37 -0
package/example/curved-links-computed-curvature/index.html +76 -0
package/example/custom-node-shape/index.html +44 -0
package/example/dag-yarn/index.html +96 -0
package/example/dagre/index.html +119 -0
package/example/dash-odd-links/index.html +47 -0
package/example/datasets/blocks.json +1 -0
package/example/datasets/d3-dependencies.csv +464 -0
package/example/datasets/miserables.json +337 -0
package/example/datasets/mplate.mtx +74090 -0
package/example/directional-links-arrows/index.html +29 -0
package/example/directional-links-particles/index.html +22 -0
package/example/dynamic/index.html +42 -0
package/example/emit-particles/index.html +50 -0
package/example/expandable-nodes/index.html +66 -0
package/example/expandable-tree/index.html +85 -0
package/example/fit-to-canvas/index.html +34 -0
package/example/fix-dragged-nodes/index.html +24 -0
package/example/highlight/index.html +84 -0
package/example/huge-1M/index.html +37 -0
package/example/img-nodes/imgs/cat.jpg +0 -0
package/example/img-nodes/imgs/dog.jpg +0 -0
package/example/img-nodes/imgs/eagle.jpg +0 -0
package/example/img-nodes/imgs/elephant.jpg +0 -0
package/example/img-nodes/imgs/grasshopper.jpg +0 -0
package/example/img-nodes/imgs/octopus.jpg +0 -0
package/example/img-nodes/imgs/owl.jpg +0 -0
package/example/img-nodes/imgs/panda.jpg +0 -0
package/example/img-nodes/imgs/squirrel.jpg +0 -0
package/example/img-nodes/imgs/tiger.jpg +0 -0
package/example/img-nodes/imgs/whale.jpg +0 -0
package/example/img-nodes/index.html +43 -0
package/example/large-graph/index.html +41 -0
package/example/load-json/index.html +24 -0
package/example/medium-graph/index.html +26 -0
package/example/medium-graph/preview.png +0 -0
package/example/move-viewport/index.html +42 -0
package/example/multi-selection/index.html +57 -0
package/example/responsive/index.html +37 -0
package/example/text-links/index.html +69 -0
package/example/text-nodes/index.html +42 -0
package/example/tree/index.html +71 -0
package/package.json +72 -0
package/src/canvas-force-graph.js +544 -0
package/src/color-utils.js +17 -0
package/src/dagDepths.js +51 -0
package/src/force-graph.css +35 -0
package/src/force-graph.js +644 -0
package/src/index.d.ts +195 -0
package/src/index.js +3 -0
package/src/kapsule-link.js +34 -0

package/example/directional-links-arrows/index.html ADDED Viewed

@@ -0,0 +1,29 @@
+<head>
+  <style> body { margin: 0; } </style>
+  <script src="//unpkg.com/force-graph"></script>
+  <!--<script src="../../dist/force-graph.js"></script>-->
+</head>
+<body>
+  <div id="graph"></div>
+  <script>
+    // Random tree
+    const N = 40;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    };
+    const Graph = ForceGraph()
+    (document.getElementById('graph'))
+      .graphData(gData)
+      .linkDirectionalArrowLength(6);
+  </script>
+</body>

package/example/directional-links-particles/index.html ADDED Viewed

@@ -0,0 +1,22 @@
+<head>
+  <style> body { margin: 0; } </style>
+  <script src="//unpkg.com/force-graph"></script>
+  <!--<script src="../../dist/force-graph.js"></script>-->
+</head>
+<body>
+  <div id="graph"></div>
+  <script>
+    fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
+      const Graph = ForceGraph()
+      (document.getElementById('graph'))
+        .graphData(data)
+        .nodeLabel('id')
+        .nodeAutoColorBy('group')
+        .linkDirectionalParticles("value")
+        .linkDirectionalParticleSpeed(d => d.value * 0.001);
+    });
+  </script>
+</body>

package/example/dynamic/index.html ADDED Viewed

@@ -0,0 +1,42 @@
+<head>
+  <style> body { margin: 0; } </style>
+  <script src="//unpkg.com/force-graph"></script>
+  <!--<script src="../../dist/force-graph.js"></script>-->
+</head>
+<body>
+  <div id="graph"></div>
+  <script>
+    const initData = {
+      nodes: [ {id: 0 } ],
+      links: []
+    };
+    const elem = document.getElementById("graph");
+    const Graph = ForceGraph()(elem)
+      .onNodeClick(removeNode)
+      .graphData(initData);
+    setInterval(() => {
+      const { nodes, links } = Graph.graphData();
+      const id = nodes.length;
+      Graph.graphData({
+        nodes: [...nodes, { id }],
+        links: [...links, { source: id, target: Math.round(Math.random() * (id-1)) }]
+      });
+    }, 1000);
+    //
+    function removeNode(node) {
+      let { nodes, links } = Graph.graphData();
+      links = links.filter(l => l.source !== node && l.target !== node); // Remove links attached to node
+      nodes.splice(node.id, 1); // Remove node
+      nodes.forEach((n, idx) => { n.id = idx; }); // Reset node ids to array index
+      Graph.graphData({ nodes, links });
+    }
+  </script>
+</body>

package/example/emit-particles/index.html ADDED Viewed

@@ -0,0 +1,50 @@
+<head>
+  <style>
+    body { margin: 0; }
+    #emit-particles-btn {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      font-size: 13px;
+    }
+  </style>
+  <script src="//unpkg.com/force-graph"></script>
+  <!--<script src="../../dist/force-graph.js"></script>-->
+</head>
+<body>
+  <div id="graph"></div>
+  <button id="emit-particles-btn">Emit 10 Random Particles</button>
+  <script>
+    // Random tree
+    const N = 50;
+    const links = [...Array(N).keys()]
+    .filter(id => id)
+      .map(id => ({
+        source: id,
+        target: Math.round(Math.random() * (id-1))
+      }));
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links
+    };
+    const Graph = ForceGraph()
+    (document.getElementById('graph'))
+      .linkDirectionalParticleColor(() => 'red')
+      .linkHoverPrecision(10)
+      .graphData(gData);
+    Graph.onLinkClick(Graph.emitParticle); // emit particles on link click
+    document.getElementById('emit-particles-btn').addEventListener('click', () => {
+      [...Array(10).keys()].forEach(() => {
+        const link = links[Math.floor(Math.random() * links.length)];
+        Graph.emitParticle(link);
+      });
+    });
+  </script>
+</body>

package/example/expandable-nodes/index.html ADDED Viewed

@@ -0,0 +1,66 @@
+<head>
+  <style> body { margin: 0; } </style>
+  <script src="//unpkg.com/force-graph"></script>
+<!--  <script src="../../dist/force-graph.js"></script>-->
+  <style>
+    .clickable { cursor: unset !important }
+  </style>
+</head>
+<body>
+  <div id="graph"></div>
+  <script>
+    const rootId = 0;
+    // Random tree
+    const N = 300;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i, collapsed: i !== rootId, childLinks: [] })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: Math.round(Math.random() * (id - 1)),
+          target: id
+        }))
+    };
+    // link parent/children
+    const nodesById = Object.fromEntries(gData.nodes.map(node => [node.id, node]));
+    gData.links.forEach(link => {
+      nodesById[link.source].childLinks.push(link);
+    });
+    const getPrunedTree = () => {
+      const visibleNodes = [];
+      const visibleLinks = [];
+      (function traverseTree(node = nodesById[rootId]) {
+        visibleNodes.push(node);
+        if (node.collapsed) return;
+        visibleLinks.push(...node.childLinks);
+        node.childLinks
+          .map(link => ((typeof link.target) === 'object') ? link.target : nodesById[link.target]) // get child node
+          .forEach(traverseTree);
+      })(); // IIFE
+      return { nodes: visibleNodes, links: visibleLinks };
+    };
+    const elem = document.getElementById('graph');
+    const Graph = ForceGraph()(elem)
+      .graphData(getPrunedTree())
+      .onNodeHover(node => elem.style.cursor = node && node.childLinks.length ? 'pointer' : null)
+      .onNodeClick(node => {
+        if (node.childLinks.length) {
+          node.collapsed = !node.collapsed; // toggle collapse state
+          Graph.graphData(getPrunedTree());
+        }
+      })
+      .linkDirectionalParticles(1)
+      .linkDirectionalParticleWidth(2.5)
+      .nodeColor(node => !node.childLinks.length ? 'green' : node.collapsed ? 'red' : 'yellow');
+  </script>
+</body>

package/example/expandable-tree/index.html ADDED Viewed

@@ -0,0 +1,85 @@
+<head>
+  <style> body { margin: 0; } </style>
+  <script src="//unpkg.com/d3-dsv"></script>
+  <script src="//unpkg.com/d3-quadtree"></script>
+  <script src="//unpkg.com/d3-force"></script>
+  <script src="//unpkg.com/force-graph"></script>
+  <!--<script src="../../dist/force-graph.js"></script>-->
+  <style>
+    .clickable { cursor: unset !important }
+  </style>
+</head>
+<body>
+<div id="graph"></div>
+<script>
+  fetch('../datasets/d3-dependencies.csv').then(r => r.text()).then(d3.csvParse).then(data => {
+    const nodes = [], links = [];
+    data.forEach(({ size, path }) => {
+      const levels = path.split('/'),
+        level = levels.length - 1,
+        module = level > 0 ? levels[1] : null,
+        leaf = levels.pop(),
+        parent = levels.join('/');
+      const node = {
+        id: path,
+        leaf,
+        module,
+        collapsed: level > 0,
+        childLinks: []
+      };
+      nodes.push(node);
+      if (parent) {
+        links.push({ source: parent, target: path });
+      }
+    });
+    const rootId = 'd3';
+    // link parent/children
+    const nodesById = Object.fromEntries(nodes.map(node => [node.id, node]));
+    links.forEach(link => {
+      nodesById[link.source].childLinks.push(link);
+    });
+    const getPrunedTree = () => {
+      const visibleNodes = [];
+      const visibleLinks = [];
+      (function traverseTree(node = nodesById[rootId]) {
+        visibleNodes.push(node);
+        if (node.collapsed) return;
+        visibleLinks.push(...node.childLinks);
+        node.childLinks
+          .map(link => ((typeof link.target) === 'object') ? link.target : nodesById[link.target]) // get child node
+        .forEach(traverseTree);
+      })(); // IIFE
+      return { nodes: visibleNodes, links: visibleLinks };
+    };
+    const elem = document.getElementById('graph');
+    const Graph = ForceGraph()
+      (elem)
+        .graphData(getPrunedTree())
+        .nodeLabel('id')
+        .nodeColor(node => !node.childLinks.length ? 'green' : node.collapsed ? 'red' : 'yellow')
+        .onNodeHover(node => elem.style.cursor = node && node.childLinks.length ? 'pointer' : null)
+        .onNodeClick(node => {
+          node.collapsed = !node.collapsed; // toggle collapse state
+          Graph.graphData(getPrunedTree());
+        })
+        .dagMode('td')
+        .dagLevelDistance(90)
+        .d3Force('collision', d3.forceCollide(node => Graph.nodeRelSize()))
+        .warmupTicks(250);
+  });
+</script>
+</body>

package/example/fit-to-canvas/index.html ADDED Viewed

@@ -0,0 +1,34 @@
+<head>
+  <style> body { margin: 0; } </style>
+  <script src="//unpkg.com/force-graph"></script>
+<!--  <script src="../../dist/force-graph.js"></script>-->
+</head>
+<body>
+  <div id="graph"></div>
+  <script>
+    // Random tree
+    const N = 100;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    };
+    const Graph = ForceGraph()
+      (document.getElementById('graph'))
+        .cooldownTicks(100)
+        .graphData(gData);
+    Graph.d3Force('center', null);
+    // fit to canvas when engine stops
+    Graph.onEngineStop(() => Graph.zoomToFit(400));
+  </script>
+</body>

package/example/fix-dragged-nodes/index.html ADDED Viewed

@@ -0,0 +1,24 @@
+<head>
+  <style> body { margin: 0; } </style>
+  <script src="//unpkg.com/force-graph"></script>
+  <!--<script src="../../dist/force-graph.js"></script>-->
+</head>
+<body>
+<div id="graph"></div>
+<script>
+  fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
+    const Graph = ForceGraph()
+    (document.getElementById('graph'))
+      .graphData(data)
+      .nodeLabel('id')
+      .nodeAutoColorBy('group')
+      .onNodeDragEnd(node => {
+        node.fx = node.x;
+        node.fy = node.y;
+      });
+  });
+</script>
+</body>

package/example/highlight/index.html ADDED Viewed

@@ -0,0 +1,84 @@
+<head>
+  <style> body { margin: 0; } </style>
+  <script src="//unpkg.com/force-graph"></script>
+  <!--<script src="../../dist/force-graph.js"></script>-->
+</head>
+<body>
+  <div id="graph"></div>
+  <script>
+    // Random tree
+    const N = 80;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    };
+    // cross-link node objects
+    gData.links.forEach(link => {
+      const a = gData.nodes[link.source];
+      const b = gData.nodes[link.target];
+      !a.neighbors && (a.neighbors = []);
+      !b.neighbors && (b.neighbors = []);
+      a.neighbors.push(b);
+      b.neighbors.push(a);
+      !a.links && (a.links = []);
+      !b.links && (b.links = []);
+      a.links.push(link);
+      b.links.push(link);
+    });
+    const NODE_R = 8;
+    const highlightNodes = new Set();
+    const highlightLinks = new Set();
+    let hoverNode = null;
+    const elem = document.getElementById('graph');
+    ForceGraph()(elem)
+      .graphData(gData)
+      .nodeRelSize(NODE_R)
+      .onNodeHover(node => {
+        highlightNodes.clear();
+        highlightLinks.clear();
+        if (node) {
+          highlightNodes.add(node);
+          node.neighbors.forEach(neighbor => highlightNodes.add(neighbor));
+          node.links.forEach(link => highlightLinks.add(link));
+        }
+        hoverNode = node || null;
+      })
+      .onLinkHover(link => {
+        highlightNodes.clear();
+        highlightLinks.clear();
+        if (link) {
+          highlightLinks.add(link);
+          highlightNodes.add(link.source);
+          highlightNodes.add(link.target);
+        }
+      })
+      .autoPauseRedraw(false) // keep redrawing after engine has stopped
+      .linkWidth(link => highlightLinks.has(link) ? 5 : 1)
+      .linkDirectionalParticles(4)
+      .linkDirectionalParticleWidth(link => highlightLinks.has(link) ? 4 : 0)
+      .nodeCanvasObjectMode(node => highlightNodes.has(node) ? 'before' : undefined)
+      .nodeCanvasObject((node, ctx) => {
+        // add ring just for highlighted nodes
+        ctx.beginPath();
+        ctx.arc(node.x, node.y, NODE_R * 1.4, 0, 2 * Math.PI, false);
+        ctx.fillStyle = node === hoverNode ? 'red' : 'orange';
+        ctx.fill();
+      });
+  </script>
+</body>

package/example/huge-1M/index.html ADDED Viewed

@@ -0,0 +1,37 @@
+<head>
+  <style> body { margin: 0; } </style>
+  <script src="//unpkg.com/force-graph"></script>
+  <!--<script src="../../dist/force-graph.js"></script>-->
+</head>
+<body>
+  <div id="graph"></div>
+  <script>
+    window.devicePixelRatio = 1; // use standard resolution in retina displays
+    // Random tree
+    const N = 500000;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    };
+    const Graph = ForceGraph()
+      (document.getElementById('graph'))
+        .linkColor(() => 'rgba(0,0,0,0.04)')
+        .enablePointerInteraction(false)
+        .d3AlphaDecay(0)
+        .d3VelocityDecay(0.08)
+        .warmupTicks(20)
+        .cooldownTicks(0)
+        .zoom(0.01)
+        .graphData(gData);
+  </script>
+</body>

package/example/img-nodes/imgs/cat.jpg ADDED Viewed

Binary file

package/example/img-nodes/imgs/dog.jpg ADDED Viewed

Binary file

package/example/img-nodes/imgs/eagle.jpg ADDED Viewed

Binary file

package/example/img-nodes/imgs/elephant.jpg ADDED Viewed

Binary file

package/example/img-nodes/imgs/grasshopper.jpg ADDED Viewed

Binary file

package/example/img-nodes/imgs/octopus.jpg ADDED Viewed

Binary file

package/example/img-nodes/imgs/owl.jpg ADDED Viewed

Binary file

package/example/img-nodes/imgs/panda.jpg ADDED Viewed

Binary file

package/example/img-nodes/imgs/squirrel.jpg ADDED Viewed

Binary file

package/example/img-nodes/imgs/tiger.jpg ADDED Viewed

Binary file

package/example/img-nodes/imgs/whale.jpg ADDED Viewed

Binary file

package/example/img-nodes/index.html ADDED Viewed

@@ -0,0 +1,43 @@
+<head>
+  <style> body { margin: 0; } </style>
+  <script src="//unpkg.com/force-graph"></script>
+  <!--<script src="../../dist/force-graph.js"></script>-->
+</head>
+<body>
+  <div id="graph"></div>
+  <script>
+    const imgs = ['cat.jpg', 'dog.jpg', 'eagle.jpg', 'elephant.jpg', 'grasshopper.jpg', 'octopus.jpg', 'owl.jpg', 'panda.jpg', 'squirrel.jpg', 'tiger.jpg', 'whale.jpg']
+      .map(src => {
+        const img = new Image();
+        img.src = `./imgs/${src}`;
+        return img;
+      });
+    // Random connected graph
+    const gData = {
+      nodes: imgs.map((img, id) => ({ id, img })),
+      links: [...Array(imgs.length).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    };
+    const Graph = ForceGraph()
+      (document.getElementById('graph'))
+      .nodeCanvasObject(({ img, x, y }, ctx) => {
+        const size = 12;
+        ctx.drawImage(img, x - size / 2, y - size / 2, size, size);
+      })
+      .nodePointerAreaPaint((node, color, ctx) => {
+        const size = 12;
+        ctx.fillStyle = color;
+        ctx.fillRect(node.x - size / 2, node.y - size / 2, size, size); // draw square as pointer trap
+      })
+      .graphData(gData);
+  </script>
+</body>

package/example/large-graph/index.html ADDED Viewed

@@ -0,0 +1,41 @@
+<head>
+  <style> body { margin: 0; } </style>
+  <script src="//unpkg.com/force-graph"></script>
+  <!--<script src="../../dist/force-graph.js"></script>-->
+</head>
+<body>
+  <div id="graph"></div>
+  <script>
+    window.devicePixelRatio = 1; // use standard resolution in retina displays
+    fetch('../datasets/mplate.mtx').then(res => res.text()).then(mtxData => {
+      let nodeSet = new Set();
+      const pairs = mtxData.split('\n')
+        .slice(14, -1)
+        .map(d => d.split(' '));
+      pairs.forEach(d => {
+        nodeSet.add(d[0]);
+        nodeSet.add(d[1]);
+      });
+      const nodes = Array.from(nodeSet).map(d => ({ id: d }));
+      const links = pairs.filter(d => d[0] !== d[1])
+        .map(d => ({ source: d[0], target: d[1] }));
+      const Graph = ForceGraph()
+        (document.getElementById('graph'))
+        .graphData({ nodes, links })
+        .d3AlphaDecay(0)
+        .d3VelocityDecay(0.08)
+        .cooldownTime(60000)
+        .linkColor(() => 'rgba(0,0,0,0.05)')
+        .zoom(0.05)
+        .enablePointerInteraction(false);
+    });
+  </script>
+</body>

package/example/load-json/index.html ADDED Viewed

@@ -0,0 +1,24 @@
+<head>
+  <style> body { margin: 0; } </style>
+  <script src="//unpkg.com/force-graph"></script>
+  <!--<script src="../../dist/force-graph.js"></script>-->
+</head>
+<body>
+  <div id="graph"></div>
+  <script>
+    fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
+      const Graph = ForceGraph()
+      (document.getElementById('graph'))
+        .graphData(data)
+        .nodeId('id')
+        .nodeVal('val')
+        .nodeLabel('id')
+        .nodeAutoColorBy('group')
+        .linkSource('source')
+        .linkTarget('target')
+    });
+  </script>
+</body>

package/example/medium-graph/index.html ADDED Viewed

@@ -0,0 +1,26 @@
+<head>
+  <style> body { margin: 0; } </style>
+  <script src="//unpkg.com/force-graph"></script>
+  <!--<script src="../../dist/force-graph.js"></script>-->
+</head>
+<body>
+  <div id="graph"></div>
+  <script>
+    fetch('../datasets/blocks.json').then(res => res.json()).then(data => {
+      const elem = document.getElementById('graph');
+      const Graph = ForceGraph()(elem)
+        .backgroundColor('#101020')
+        .nodeRelSize(6)
+        .nodeAutoColorBy('user')
+        .nodeLabel(node => `${node.user}: ${node.description}`)
+        .linkColor(() => 'rgba(255,255,255,0.2)')
+        .linkDirectionalParticles(1)
+        .onNodeClick(node => window.open(`https://bl.ocks.org/${node.user}/${node.id}`, '_blank'))
+        .graphData(data);
+      });
+  </script>
+</body>

package/example/medium-graph/preview.png ADDED Viewed

Binary file