-
Notifications
You must be signed in to change notification settings - Fork 284
/
index.html
71 lines (56 loc) · 2.18 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<head>
<style> body { margin: 0; } </style>
<script src="//unpkg.com/react/umd/react.production.min.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="//unpkg.com/@babel/standalone"></script>
<script src="//unpkg.com/react-force-graph-3d"></script>
<!--<script src="../../src/packages/react-force-graph-3d/dist/react-force-graph-3d.js"></script>-->
<script src="../datasets/random-data.js"></script>
</head>
<body>
<div id="graph"></div>
<script type="text/jsx">
const { useState, useMemo, useCallback } = React;
const ExpandableGraph = ({ graphData }) => {
const rootId = 0;
const nodesById = useMemo(() => {
const nodesById = Object.fromEntries(graphData.nodes.map(node => [node.id, node]));
// link parent/children
graphData.nodes.forEach(node => {
node.collapsed = node.id !== rootId;
node.childLinks = [];
});
graphData.links.forEach(link => nodesById[link.source].childLinks.push(link));
return nodesById;
}, [graphData]);
const getPrunedTree = useCallback(() => {
const visibleNodes = [];
const visibleLinks = [];
(function traverseTree(node = nodesById[rootId]) {
visibleNodes.push(node);
if (node.collapsed) return;
visibleLinks.push(...node.childLinks);
node.childLinks
.map(link => ((typeof link.target) === 'object') ? link.target : nodesById[link.target]) // get child node
.forEach(traverseTree);
})();
return { nodes: visibleNodes, links: visibleLinks };
}, [nodesById]);
const [prunedTree, setPrunedTree] = useState(getPrunedTree());
const handleNodeClick = useCallback(node => {
node.collapsed = !node.collapsed; // toggle collapse state
setPrunedTree(getPrunedTree())
}, []);
return <ForceGraph3D
graphData={prunedTree}
linkDirectionalParticles={2}
nodeColor={node => !node.childLinks.length ? 'green' : node.collapsed ? 'red' : 'yellow'}
onNodeClick={handleNodeClick}
/>;
};
ReactDOM.render(
<ExpandableGraph graphData={genRandomTree(600, true)}/>,
document.getElementById('graph')
);
</script>
</body>