Appearance
In place resize new
Double-click on any node to resize it 20x.
ts
import Ogma, { Easing } from '@linkurious/ogma';
// Create an instance of Ogma and bind it to the graph-container.
const ogma = new Ogma({
container: 'graph-container'
});
ogma.styles.addRule({
nodeAttributes: {
radius: n => +n?.getAttribute('radius') / 2,
innerStroke: {
color: '#222',
width: 0.5,
minVisibleSize: 2,
scalingMethod: 'scaled'
},
text: {
minVisibleSize: 100
}
},
edgeAttributes: {
width: e => +e?.getAttribute('width') / 4,
opacity: 0.5
}
});
const duration = 250;
const easing: Easing = 'cubicOut';
const graph = await Ogma.parse.gexfFromUrl('files/arctic.gexf');
await ogma.setGraph(graph);
ogma.events.on('doubleclick', async evt => {
if (evt.target && evt.target.isNode) {
const focusNode = evt.target;
const r = Number(focusNode.getAttribute('radius'));
let K = 20;
if (focusNode.getData('zoomed')) K = 1 / K;
focusNode.setData('zoomed', !focusNode.getData('zoomed'));
const deltaRadius = r * (K - 1);
await focusNode.setAttribute('radius', r + deltaRadius);
const nodes = ogma.getNodes();
ogma.algorithms.fishEyeExpand({
focusNode,
nodes,
deltaRadius,
duration,
easing
});
}
});
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
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
html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="graph-container"></div>
<script type="module" src="index.ts"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
css
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 0;
overflow: hidden;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9