41 lines
No EOL
1.1 KiB
HTML
Executable file
41 lines
No EOL
1.1 KiB
HTML
Executable file
<head>
|
|
<style> body { margin: 0; } </style>
|
|
|
|
<script src="//unpkg.com/3d-force-graph"></script>
|
|
<!-- <script src="../../dist/3d-force-graph.js"></script>-->
|
|
|
|
<style>
|
|
.node-label {
|
|
font-size: 12px;
|
|
padding: 1px 4px;
|
|
border-radius: 4px;
|
|
background-color: rgba(0,0,0,0.5);
|
|
user-select: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="3d-graph"></div>
|
|
|
|
<script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
|
|
<script type="module">
|
|
import { CSS2DRenderer, CSS2DObject } from '//unpkg.com/three/examples/jsm/renderers/CSS2DRenderer.js';
|
|
|
|
const Graph = ForceGraph3D({
|
|
extraRenderers: [new CSS2DRenderer()]
|
|
})
|
|
(document.getElementById('3d-graph'))
|
|
.jsonUrl('../datasets/miserables.json')
|
|
.nodeAutoColorBy('group')
|
|
.nodeThreeObject(node => {
|
|
const nodeEl = document.createElement('div');
|
|
nodeEl.textContent = node.id;
|
|
nodeEl.style.color = node.color;
|
|
nodeEl.className = 'node-label';
|
|
return new CSS2DObject(nodeEl);
|
|
})
|
|
.nodeThreeObjectExtend(true)
|
|
;
|
|
</script>
|
|
</body> |