example/manipulate-link-force/index.html

<head>
  <style> body { margin: 0; } </style>

  <script src="//unpkg.com/3d-force-graph"></script>
  <!-- <script src="../../dist/3d-force-graph.js"></script> -->
</head>

<body>
  <div id="3d-graph"></div>

  <script type="module">
    import { GUI } from 'https://esm.sh/dat.gui';

    // Create 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)),
          color: id % 2
        }))
    };

    const graph = new ForceGraph3D(document.getElementById('3d-graph'))
        .nodeLabel(node => node.id)
        .linkColor(link => link.color ? 'red' : 'green' )
        .linkOpacity(1)
        .graphData(gData);

    const linkForce = graph
      .d3Force('link')
      .distance(link => link.color ? settings.redDistance : settings.greenDistance);
    
    //Define GUI
    const Settings = function() {
      this.redDistance = 20;
      this.greenDistance = 20;
    };

    const settings = new Settings();
    const gui = new GUI();

    const controllerOne = gui.add(settings, 'redDistance', 0, 100);
    const controllerTwo = gui.add(settings, 'greenDistance', 0, 100);

    controllerOne.onChange(updateLinkDistance);
    controllerTwo.onChange(updateLinkDistance);

    function updateLinkDistance() {
      linkForce.distance(link => link.color ? settings.redDistance : settings.greenDistance);
      graph.numDimensions(3); // Re-heat simulation
    }
  </script>
</body>