3d-force-graph
Version:
UI component for a 3D force-directed graph using ThreeJS and d3-force-3d layout engine
39 lines (32 loc) • 1.2 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 SpriteText from "https://esm.sh/three-spritetext";
const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
.jsonUrl('../datasets/miserables.json')
.nodeLabel('id')
.nodeAutoColorBy('group')
.linkThreeObjectExtend(true)
.linkThreeObject(link => {
// extend link with text sprite
const sprite = new SpriteText(`${link.source} > ${link.target}`);
sprite.color = 'lightgrey';
sprite.textHeight = 1.5;
return sprite;
})
.linkPositionUpdate((sprite, { start, end }) => {
const middlePos = Object.assign(...['x', 'y', 'z'].map(c => ({
[c]: start[c] + (end[c] - start[c]) / 2 // calc middle point
})));
// Position sprite
Object.assign(sprite.position, middlePos);
});
// Spread nodes a little wider
Graph.d3Force('charge').strength(-120);
</script>
</body>