3d-force-graph
Version:
UI component for a 3D force-directed graph using ThreeJS and d3-force-3d layout engine
72 lines (61 loc) • 2.06 kB
HTML
<head>
<style> body { margin: 0; } </style>
<script src="//bundle.run/@yarnpkg/lockfile@1.1.0"></script>
<script src="//cdn.jsdelivr.net/npm/3d-force-graph"></script>
<!--<script src="../../dist/3d-force-graph.js"></script>-->
</head>
<body>
<div id="graph"></div>
<script type="module">
import SpriteText from 'https://esm.sh/three-spritetext';
import { forceCollide } from 'https://esm.sh/d3-force-3d';
import { GUI } from 'https://esm.sh/dat.gui';
// controls
const controls = { 'DAG Orientation': 'lr'};
const gui = new GUI();
gui.add(controls, 'DAG Orientation', ['lr', 'td', 'zout', 'radialout', null])
.onChange(orientation => graph && graph.dagMode(orientation));
// graph config
const graph = new ForceGraph3D(document.getElementById('graph'))
.backgroundColor('#101020')
.linkColor(() => 'rgba(255, 255, 255, 0.6)')
.dagMode('lr')
.onDagError(() => false)
.dagLevelDistance(180)
.nodeId('package')
.linkCurvature(0.07)
.nodeThreeObject(node => {
const sprite = new SpriteText(node.package);
sprite.material.depthWrite = false;
sprite.color = 'lightsteelblue';
sprite.textHeight = 8;
return sprite;
})
.d3Force('collide', forceCollide(13))
.d3AlphaDecay(0.02)
.d3VelocityDecay(0.3);
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(([pkg, details]) => {
nodes.push({
package: pkg,
version: details.version
});
if (details.dependencies) {
Object.entries(details.dependencies).forEach(([dep, version]) => {
links.push({source: pkg, target: `${dep}@${version}`});
});
}
});
graph.graphData({ nodes, links });
});
</script>
</body>