How to use d3-force-3d - 10 common examples

const fxFn = getFFn(['lr', 'rl'].indexOf(state.dagMode) !== -1, state.dagMode === 'rl');
          const fyFn = getFFn(['td', 'bu'].indexOf(state.dagMode) !== -1, state.dagMode === 'td');
          const fzFn = getFFn(['zin', 'zout'].indexOf(state.dagMode) !== -1, state.dagMode === 'zout');

          state.graphData.nodes.forEach(node => {
            node.fx = fxFn(node);
            node.fy = fyFn(node);
            node.fz = fzFn(node);
          });
        }

        // Use radial force for radial dags
        state.d3ForceLayout.force('dagRadial',
          ['radialin', 'radialout'].indexOf(state.dagMode) !== -1
            ? d3ForceRadial(node => {
                const nodeDepth = nodeDepths[node[state.nodeId]];
                return (state.dagMode === 'radialin' ? maxDepth - nodeDepth : nodeDepth) * dagLevelDistance;
              })
              .strength(1)
            : null
        );
      } else {
        // ngraph
        const graph = ngraph.graph();
        state.graphData.nodes.forEach(node => { graph.addNode(node[state.nodeId]); });
        state.graphData.links.forEach(link => { graph.addLink(link.source, link.target); });
        layout = ngraph['forcelayout' + (state.numDimensions === 2 ? '' : '3d')](graph);
        layout.graph = graph; // Attach graph reference to layout
      }

      for (let i = 0; i < state.warmupTicks; i++) { layout[isD3Sim ? 'tick' : 'step'](); } // Initial ticks before starting to render

? undefined
        : (nodeDepths[node[state.nodeId]] - maxDepth / 2) * dagLevelDistance * (invert ? -1 : 1);

      const fxFn = getFFn(['lr', 'rl'].indexOf(state.dagMode) !== -1, state.dagMode === 'rl');
      const fyFn = getFFn(['td', 'bu'].indexOf(state.dagMode) !== -1, state.dagMode === 'bu');

      state.graphData.nodes.forEach(node => {
        node.fx = fxFn(node);
        node.fy = fyFn(node);
      });
    }

    // Use radial force for radial dags
    state.forceLayout.force('dagRadial',
      ['radialin', 'radialout'].indexOf(state.dagMode) !== -1
        ? d3ForceRadial(node => {
        const nodeDepth = nodeDepths[node[state.nodeId]];
        return (state.dagMode === 'radialin' ? maxDepth - nodeDepth : nodeDepth) * dagLevelDistance;
      })
        .strength(1)
        : null
    );

    for (let i=0; i

})
      .attr("geometry", () => {
        const geometry = new THREE.Geometry();
        geometry.vertices = [
          new THREE.Vector3(0, 0, 0),
          new THREE.Vector3(0, 0, 0)
        ];

        return geometry;
      });

    forceSimulation()
      .numDimensions(2)
      .nodes(nodes)
      .force("link", forceLink(links).distance(20).strength(1.25))
      .force("charge", forceManyBody().strength(-50))
      .force("center", forceCenter())
      .on("end", ticked);

    function vertex({ x = 0, y = 0 }) {
      const l = x * Math.PI / 180;
      const p = y * Math.PI / 180;
      const c = Math.cos(p);

      return {
        x: radius * c * Math.cos(l),
        y: radius * c * Math.sin(l),
        z: radius * Math.sin(p)
      };
    }

    function resample(coordinates) {

stateInit: () => ({
    d3ForceLayout: d3ForceSimulation()
      .force('link', d3ForceLink())
      .force('charge', d3ForceManyBody())
      .force('center', d3ForceCenter())
      .stop()
  }),

})
      .attr("geometry", () => {
        const geometry = new THREE.Geometry();
        geometry.vertices = [
          new THREE.Vector3(0, 0, 0),
          new THREE.Vector3(0, 0, 0)
        ];

        return geometry;
      });

    forceSimulation()
      .numDimensions(3)
      .nodes(nodes)
      .force("link", forceLink(links).distance(20).strength(1.5))
      .force("charge", forceManyBody().strength(-20))
      .force("center", forceCenter())
      .on("tick", ticked);

    function ticked() {
      node.attr("position", ({ x = 0, y = 0, z = 0 }) => {
        return { x, y, z };
      });

      link.each(function({ source, target }) {
        this.geometry.vertices = [
          new THREE.Vector3(source.x, source.y || 0, source.z || 0),
          new THREE.Vector3(target.x, target.y || 0, target.z || 0)
        ];

        this.geometry.verticesNeedUpdate = true;
      });

stateInit: () => ({
    forceLayout: d3ForceSimulation()
      .force('link', d3ForceLink())
      .force('charge', d3ForceManyBody())
      .force('center', d3ForceCenter())
      .force('dagRadial', null)
      .stop(),
    engineRunning: false
  }),

stateInit: () => ({
    d3ForceLayout: d3ForceSimulation()
      .force('link', d3ForceLink())
      .force('charge', d3ForceManyBody())
      .force('center', d3ForceCenter())
      .force('dagRadial', null)
      .stop(),
    engineRunning: false
  }),

.attr("geometry", () => {
        const geometry = new THREE.Geometry();
        geometry.vertices = [
          new THREE.Vector3(0, 0, 0),
          new THREE.Vector3(0, 0, 0)
        ];

        return geometry;
      });

    forceSimulation()
      .numDimensions(2)
      .nodes(nodes)
      .force("link", forceLink(links).distance(20).strength(1.25))
      .force("charge", forceManyBody().strength(-50))
      .force("center", forceCenter())
      .on("end", ticked);

    function vertex({ x = 0, y = 0 }) {
      const l = x * Math.PI / 180;
      const p = y * Math.PI / 180;
      const c = Math.cos(p);

      return {
        x: radius * c * Math.cos(l),
        y: radius * c * Math.sin(l),
        z: radius * Math.sin(p)
      };
    }

    function resample(coordinates) {
      let i = 0;