3d-force-graph
Version:
UI component for a 3D force-directed graph using ThreeJS and d3-force-3d layout engine
58 lines (46 loc) • 1.61 kB
HTML
<head>
<style> body { margin: 0; } </style>
<script src="//cdn.jsdelivr.net/npm/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>