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/auto-colored/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 NODES = 300;
+    const GROUPS = 12;
+    const gData = {
+      nodes: [...Array(NODES).keys()].map(i => ({
+        id: i,
+        group: Math.ceil(Math.random() * GROUPS)
+      })),
+      links: [...Array(NODES).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    }
+    const Graph = ForceGraph()
+      (document.getElementById('graph'))
+        .nodeAutoColorBy('group')
+        .linkAutoColorBy(d => gData.nodes[d.source].group)
+        .graphData(gData);
+  </script>
+</body>

package/example/basic/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 = 300;
+    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'))
+        .linkDirectionalParticles(2)
+        .graphData(gData);
+  </script>
+</body>

package/example/build-a-graph/index.html ADDED Viewed

@@ -0,0 +1,108 @@
+<head>
+  <style> body { margin: 0; } </style>
+  <script src="//unpkg.com/force-graph"></script>
+  <!--<script src="../../dist/force-graph.js"></script>-->
+</head>
+<body>
+<br/>
+<div style="text-align: center; color: silver">
+  <b>New node:</b> click on the canvas, <b>New link:</b> drag one node close enough to another one,
+  <b>Rename</b> node or link by clicking on it, <b>Remove</b> node or link by right-clicking on it
+</div>
+  <div id="graph"></div>
+  <script>
+    let nodeIdCounter = 0, linkIdCounter = 0;
+    let nodes = [], links = [];
+    let dragSourceNode = null, interimLink = null;
+    const snapInDistance = 15;
+    const snapOutDistance = 40;
+    const updateGraphData = () => {
+      Graph.graphData({ nodes: nodes, links: links });
+    };
+    const distance = (node1, node2) => {
+      return Math.sqrt(Math.pow(node1.x - node2.x, 2) + Math.pow(node1.y - node2.y, 2));
+    };
+    const rename = (nodeOrLink, type) => {
+      let value = prompt('Name this ' + type + ':', nodeOrLink.name);
+      if (!value) {
+        return;
+      }
+      nodeOrLink.name = value;
+      updateGraphData();
+    };
+    const setInterimLink = (source, target) => {
+      let linkId = linkIdCounter ++;
+      interimLink = { id: linkId, source: source, target: target, name: 'link_' + linkId };
+      links.push(interimLink);
+      updateGraphData();
+    };
+    const removeLink = link => {
+      links.splice(links.indexOf(link), 1);
+    };
+    const removeInterimLinkWithoutAddingIt = () => {
+      removeLink(interimLink);
+      interimLink = null;
+      updateGraphData();
+    };
+    const removeNode = node => {
+      links.filter(link => link.source === node || link.target === node).forEach(link => removeLink(link));
+      nodes.splice(nodes.indexOf(node), 1);
+    };
+    const Graph = ForceGraph()
+      (document.getElementById('graph'))
+        .linkDirectionalArrowLength(6)
+        .linkDirectionalArrowRelPos(1)
+        .onNodeDrag(dragNode => {
+          dragSourceNode = dragNode;
+          for (let node of nodes) {
+            if (dragNode === node) {
+              continue;
+            }
+            // close enough: snap onto node as target for suggested link
+            if (!interimLink && distance(dragNode, node) < snapInDistance) {
+              setInterimLink(dragSourceNode, node);
+            }
+            // close enough to other node: snap over to other node as target for suggested link
+            if (interimLink && node !== interimLink.target && distance(dragNode, node) < snapInDistance) {
+              removeLink(interimLink);
+              setInterimLink(dragSourceNode, node);
+            }
+          }
+          // far away enough: snap out of the current target node
+          if (interimLink && distance(dragNode, interimLink.target) > snapOutDistance) {
+            removeInterimLinkWithoutAddingIt();
+          }
+        })
+        .onNodeDragEnd(() => {
+          dragSourceNode = null;
+          interimLink = null;
+          updateGraphData();
+        })
+        .nodeColor(node => node === dragSourceNode || (interimLink &&
+                (node === interimLink.source || node === interimLink.target)) ? 'orange' : null)
+        .linkColor(link => link === interimLink ? 'orange' : '#bbbbbb')
+        .linkLineDash(link => link === interimLink ? [2, 2] : [])
+        .onNodeClick((node, event) => rename(node, 'node'))
+        .onNodeRightClick((node, event) => removeNode(node))
+        .onLinkClick((link, event) => rename(link, 'link'))
+        .onLinkRightClick((link, event) => removeLink(link))
+        .onBackgroundClick(event => {
+          let coords = Graph.screen2GraphCoords(event.layerX, event.layerY);
+          let nodeId = nodeIdCounter ++;
+          nodes.push({ id: nodeId, x: coords.x, y: coords.y, name: 'node_' + nodeId });
+          updateGraphData();
+        });
+    updateGraphData();
+  </script>
+</body>

package/example/click-to-focus/index.html ADDED Viewed

@@ -0,0 +1,28 @@
+<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 elem = document.getElementById('graph');
+    const Graph = ForceGraph()(elem)
+      .graphData(data)
+      .nodeLabel('id')
+      .nodeAutoColorBy('group')
+      .linkDirectionalParticles(2)
+      .linkDirectionalParticleWidth(1.4)
+      .onNodeClick(node => {
+        // Center/zoom on node
+        Graph.centerAt(node.x, node.y, 1000);
+        Graph.zoom(8, 2000);
+      });
+  });
+</script>
+</body>

package/example/collision-detection/index.html ADDED Viewed

@@ -0,0 +1,50 @@
+<head>
+  <style> body { margin: 0; } </style>
+  <script src="//unpkg.com/force-graph"></script>
+  <!--<script src="../../dist/force-graph.js"></script>-->
+  <script src="//unpkg.com/d3-quadtree"></script>
+  <script src="//unpkg.com/d3-force"></script>
+</head>
+<body>
+  <div id="graph"></div>
+  <script>
+    const N = 80;
+    const nodes = [...Array(N).keys()].map(() => ({
+      // Initial velocity in random direction
+      vx: (Math.random() * 2) - 1,
+      vy: (Math.random() * 2) - 1
+    }));
+    const Graph = ForceGraph()
+      (document.getElementById('graph'));
+    Graph.cooldownTime(Infinity)
+      .d3AlphaDecay(0)
+      .d3VelocityDecay(0)
+      // Deactivate existing forces
+      .d3Force('center', null)
+      .d3Force('charge', null)
+      // Add collision and bounding box forces
+      .d3Force('collide', d3.forceCollide(Graph.nodeRelSize()))
+      .d3Force('box', () => {
+        const SQUARE_HALF_SIDE = Graph.nodeRelSize() * N * 0.5;
+        nodes.forEach(node => {
+          const x = node.x || 0, y = node.y || 0;
+          // bounce on box walls
+          if (Math.abs(x) > SQUARE_HALF_SIDE) { node.vx *= -1; }
+          if (Math.abs(y) > SQUARE_HALF_SIDE) { node.vy *= -1; }
+        });
+      })
+      // Add nodes
+      .graphData({ nodes, links: [] });
+  </script>
+</body>

package/example/curved-links/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>
+    const gData = {
+      nodes: [...Array(9).keys()].map(i => ({ id: i })),
+      links: [
+        { source: 1, target: 4, curvature: 0 },
+        { source: 1, target: 4, curvature: 0.5 },
+        { source: 1, target: 4, curvature: -0.5 },
+        { source: 5, target: 2, curvature: 0.3 },
+        { source: 2, target: 5, curvature: 0.3 },
+        { source: 0, target: 3, curvature: 0 },
+        { source: 3, target: 3, curvature: 0.5 },
+        { source: 0, target: 4, curvature: 0.2 },
+        { source: 4, target: 5, curvature: 0.5 },
+        { source: 5, target: 6, curvature: 0.7 },
+        { source: 6, target: 7, curvature: 1 },
+        { source: 7, target: 8, curvature: 2 },
+        { source: 8, target: 0, curvature: 0.5 }
+      ]
+    };
+    const Graph = ForceGraph()
+      (document.getElementById('graph'))
+        .linkDirectionalParticles(2)
+        .linkCurvature('curvature')
+        .graphData(gData);
+  </script>
+</body>

package/example/curved-links-computed-curvature/index.html ADDED Viewed

@@ -0,0 +1,76 @@
+<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 gData = {
+      nodes: [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }],
+      links: [
+        { source: 0, target: 1 },
+        { source: 0, target: 1 },
+        { source: 1, target: 0 },
+        { source: 1, target: 2 },
+        { source: 2, target: 2 },
+        { source: 2, target: 2 },
+        { source: 2, target: 2 },
+        { source: 2, target: 3 },
+        { source: 3, target: 4 },
+        { source: 4, target: 3 }
+      ]
+    };
+    let selfLoopLinks = {};
+    let sameNodesLinks = {};
+    const curvatureMinMax = 0.5;
+    // 1. assign each link a nodePairId that combines their source and target independent of the links direction
+    // 2. group links together that share the same two nodes or are self-loops
+    gData.links.forEach(link => {
+      link.nodePairId = link.source <= link.target ? (link.source + "_" + link.target) : (link.target + "_" + link.source);
+      let map = link.source === link.target ? selfLoopLinks : sameNodesLinks;
+      if (!map[link.nodePairId]) {
+        map[link.nodePairId] = [];
+      }
+      map[link.nodePairId].push(link);
+    });
+    // Compute the curvature for self-loop links to avoid overlaps
+    Object.keys(selfLoopLinks).forEach(id => {
+      let links = selfLoopLinks[id];
+      let lastIndex = links.length - 1;
+      links[lastIndex].curvature = 1;
+      let delta = (1 - curvatureMinMax) / lastIndex;
+      for (let i = 0; i < lastIndex; i++) {
+        links[i].curvature = curvatureMinMax + i * delta;
+      }
+    });
+    // Compute the curvature for links sharing the same two nodes to avoid overlaps
+    Object.keys(sameNodesLinks).filter(nodePairId => sameNodesLinks[nodePairId].length > 1).forEach(nodePairId => {
+      let links = sameNodesLinks[nodePairId];
+      let lastIndex = links.length - 1;
+      let lastLink = links[lastIndex];
+      lastLink.curvature = curvatureMinMax;
+      let delta = 2 * curvatureMinMax / lastIndex;
+      for (let i = 0; i < lastIndex; i++) {
+        links[i].curvature = - curvatureMinMax + i * delta;
+        if (lastLink.source !== links[i].source) {
+          links[i].curvature *= -1; // flip it around, otherwise they overlap
+        }
+      }
+    });
+    const Graph = ForceGraph()
+      (document.getElementById('graph'))
+        .linkCurvature('curvature')
+        .linkDirectionalArrowLength(6)
+        .linkDirectionalArrowRelPos(1)
+        .graphData(gData);
+  </script>
+</body>

package/example/custom-node-shape/index.html ADDED Viewed

@@ -0,0 +1,44 @@
+<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 = 20;
+    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))
+        }))
+    };
+    // gen a number persistent color from around the palette
+    const getColor = n => '#' + ((n * 1234567) % Math.pow(2, 24)).toString(16).padStart(6, '0');
+    const Graph = ForceGraph()
+      (document.getElementById('graph'))
+        .nodeCanvasObject((node, ctx) => nodePaint(node, getColor(node.id), ctx))
+        .nodePointerAreaPaint(nodePaint)
+        .nodeLabel('id')
+        .graphData(gData);
+    function nodePaint({ id, x, y }, color, ctx) {
+      ctx.fillStyle = color;
+      [
+        () => { ctx.fillRect(x - 6, y - 4, 12, 8); }, // rectangle
+        () => { ctx.beginPath(); ctx.moveTo(x, y - 5); ctx.lineTo(x - 5, y + 5); ctx.lineTo(x + 5, y + 5); ctx.fill(); }, // triangle
+        () => { ctx.beginPath(); ctx.arc(x, y, 5, 0, 2 * Math.PI, false); ctx.fill(); }, // circle
+        () => { ctx.font = '10px Sans-Serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('Text', x, y); } // text
+      ][id%4]();
+    }
+  </script>
+</body>

package/example/dag-yarn/index.html ADDED Viewed

@@ -0,0 +1,96 @@
+<head>
+  <style> body { margin: 0; } </style>
+  <script src="//bundle.run/@yarnpkg/lockfile@1.1.0"></script>
+  <script src="//unpkg.com/dat.gui"></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>-->
+</head>
+<body>
+  <div id="graph"></div>
+  <script>
+    // controls
+    const controls = { 'DAG Orientation': 'lr'};
+    const gui = new dat.GUI();
+    gui.add(controls, 'DAG Orientation', ['lr', 'td', 'radialout', null])
+      .onChange(orientation => graph && graph.dagMode(orientation));
+    // graph config
+    const graph = ForceGraph()
+      .backgroundColor('#101020')
+      .linkColor(() => 'rgba(255,255,255,0.2)')
+      .dagMode('lr')
+      .dagLevelDistance(300)
+      .nodeId('package')
+      .linkCurvature(d =>
+        0.07 * // max curvature
+        // curve outwards from source, using gradual straightening within a margin of a few px
+        (['td', 'bu'].includes(graph.dagMode())
+          ? Math.max(-1, Math.min(1, (d.source.x - d.target.x) / 25)) :
+          ['lr', 'rl'].includes(graph.dagMode())
+            ? Math.max(-1, Math.min(1, (d.target.y - d.source.y) / 25))
+            : ['radialout', 'radialin'].includes(graph.dagMode()) ? 0 : 1
+        )
+      )
+      .linkDirectionalParticles(2)
+      .linkDirectionalParticleWidth(3)
+      .nodeCanvasObject((node, ctx) => {
+        const label = node.package;
+        const fontSize = 15;
+        ctx.font = `${fontSize}px Sans-Serif`;
+        const textWidth = ctx.measureText(label).width;
+        const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.2); // some padding
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
+        ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillStyle = 'lightsteelblue';
+        ctx.fillText(label, node.x, node.y);
+        node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
+      })
+      .nodePointerAreaPaint((node, color, ctx) => {
+        ctx.fillStyle = color;
+        const bckgDimensions = node.__bckgDimensions;
+        bckgDimensions && ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
+      })
+      .d3Force('collide', d3.forceCollide(13))
+      .d3AlphaDecay(0.02)
+      .d3VelocityDecay(0.3);
+    fetch('//unpkg.com/d3@5.9.7/yarn.lock')
+      .then(r => r.text())
+      .then(text => {
+        const yarnlock = _yarnpkg_lockfile.parse(text);
+        if (yarnlock.type !== 'success') throw new Error('invalid yarn.lock');
+        return yarnlock.object;
+      })
+      .then(yarnlock => {
+        const nodes = [];
+        const links = [];
+        Object.entries(yarnlock).forEach(([package, details]) => {
+          nodes.push({
+            package,
+            version: details.version
+          });
+          if (details.dependencies) {
+            Object.entries(details.dependencies).forEach(([dep, version]) => {
+              links.push({source: package, target: `${dep}@${version}`});
+            });
+          }
+        });
+        graph(document.getElementById('graph'))
+          .graphData({ nodes, links });
+      });
+  </script>
+</body>

package/example/dagre/index.html ADDED Viewed

@@ -0,0 +1,119 @@
+<head>
+  <style> body { margin: 0; } </style>
+  <script src="//bundle.run/@yarnpkg/lockfile"></script>
+  <script src="//unpkg.com/dagre/dist/dagre.min.js"></script>
+  <script src="//unpkg.com/accessor-fn"></script>
+  <script src="//unpkg.com/force-graph"></script>
+  <!--<script src="../../dist/force-graph.js"></script>-->
+</head>
+<body>
+  <div id="graph"></div>
+  <script>
+    const Graph = ForceGraph()(document.getElementById('graph'))
+      .nodeId('id')
+      .nodeLabel('id')
+      .cooldownTicks(0) // pre-defined layout, cancel force engine iterations
+      .linkDirectionalArrowLength(3)
+      .linkDirectionalArrowRelPos(1)
+      .linkCurvature(d =>
+        0.07 * // max curvature
+        //   curve outwards from source, using gradual straightening within a margin of a few px
+        Math.max(-1, Math.min(1, (d.source.x - d.target.x) / 5)) *
+        Math.max(-1, Math.min(1, (d.target.y - d.source.y) / 5))
+      );
+    fetch('../../yarn.lock')
+      .then(r => r.text())
+      .then(text => {
+        const yarnlock = _yarnpkg_lockfile.parse(text);
+        if (yarnlock.type !== 'success') throw new Error('invalid yarn.lock');
+        return yarnlock.object;
+      })
+      .then(yarnlock => {
+        const nodes = [];
+        const links = [];
+        Object.entries(yarnlock).forEach(([package, details]) => {
+          nodes.push({ id: package });
+          if (details.dependencies) {
+            Object.entries(details.dependencies).forEach(([dep, version]) => {
+              links.push({source: package, target: `${dep}@${version}`});
+            });
+          }
+        });
+        return { nodes, links };
+      }).then(data => {
+        const nodeDiameter = Graph.nodeRelSize() * 2;
+        const layoutData = getLayout(data.nodes, data.links, {
+          nodeWidth: nodeDiameter,
+          nodeHeight: nodeDiameter,
+          nodesep: nodeDiameter * 0.5,
+          ranksep: nodeDiameter * Math.sqrt(data.nodes.length) * 0.6,
+          // root nodes aligned on top
+          rankDir: 'BT',
+          ranker: 'longest-path',
+          linkSource: 'target',
+          linkTarget: 'source'
+        });
+        layoutData.nodes.forEach(node => { node.fx = node.x; node.fy = node.y; }); // fix nodes
+        Graph.graphData(layoutData);
+        Graph.zoomToFit();
+      });
+    //
+    function getLayout(nodes, links, {
+      nodeId = 'id',
+      linkSource = 'source',
+      linkTarget = 'target',
+      nodeWidth = 0,
+      nodeHeight = 0,
+      ...graphCfg
+    } = {}) {
+      const getNodeWidth = accessorFn(nodeWidth);
+      const getNodeHeight = accessorFn(nodeHeight);
+      const g = new dagre.graphlib.Graph();
+      g.setGraph({
+        // rankDir: 'LR',
+        // ranker: 'network-simplex' // 'tight-tree', 'longest-path'
+        // acyclicer: 'greedy'
+        nodesep: 5,
+        edgesep: 1,
+        ranksep: 20,
+        ...graphCfg
+      });
+      nodes.forEach(node =>
+        g.setNode(
+          node[nodeId],
+          Object.assign({}, node, {
+            width: getNodeWidth(node),
+            height: getNodeHeight(node)
+          })
+        )
+      );
+      links.forEach(link =>
+        g.setEdge(link[linkSource], link[linkTarget], Object.assign({}, link))
+      );
+      dagre.layout(g);
+      return {
+        nodes: g.nodes().map(n => {
+          const node = g.node(n);
+          delete node.width;
+          delete node.height;
+          return node;
+        }),
+        links: g.edges().map(e => g.edge(e))
+      };
+    }
+  </script>
+</body>

package/example/dash-odd-links/index.html ADDED Viewed

@@ -0,0 +1,47 @@
+<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)),
+          dashed: (id % 2 === 0)
+        }))
+    };
+    const elem = document.getElementById('graph');
+    const dashLen = 6;
+    const gapLen = 8;
+    const Graph = ForceGraph()(elem)
+      .graphData(gData)
+      .nodeRelSize(8)
+      .linkWidth(3)
+      .linkLineDash(link => link.dashed && [dashLen, gapLen]);
+    // Dash animation
+    const st = +new Date();
+    const dashAnimateTime = 300; // time to animate a single dash
+    (function animate() {
+      const t = ((+new Date() - st) % dashAnimateTime) / dashAnimateTime;
+      const lineDash = t < 0.5 ? [0, gapLen * t * 2, dashLen, gapLen * (1 - t * 2)] : [dashLen * (t - 0.5) * 2, gapLen, dashLen * (1 - (t - 0.5) * 2), 0];
+      Graph.linkLineDash(link => link.dashed && lineDash);
+      requestAnimationFrame(animate);
+    })(); // IIFE
+  </script>
+</body>