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
72
73
74
75 | <script type="text/javascript" charset="utf-8">
var panel;//Create a global variable to keep the panel where the thinkmap will be painted
//Create number of node and add the relation to parrent
function createGroup(parent, number)
{
for (var i = 0; i<number; i++)
{
//Create normal node
var nn1 = new ItemNode(panel);
//Set the innerHTML for the new node
nn1.setHtmlCode('Item ' + i);
//Add node into the panel
panel.addNode(nn1);
//Add relationship between parrent and new node
panel.addEdge(parent, nn1, 100);
}
}
function nodeClick(node)
{
alert(node.getHtmlCode());
}
onload = function()
{
//Create new thinkmap object. It will be painted into a div which id is 'demo'
panel = new GraphPanel('demo');
//Catch the item click event
panel.mouseClick = nodeClick;
var nn = null;
//Create a center node. Each thinkmap should has a center node. It won't auto move around and keep the map more stable
//You can ignore it to see what happen ;)
var cn = new ItemNode(panel);
//Change the innerHTML for the created node.
cn.setHtmlCode('Center node');
//Add new node to the panel
panel.addNode(cn);
var fn = null;
for (var i = 0; i<3; i++)
{
var nn1 = new Node(panel);
nn1.setHtmlCode('Cat node ' + i);
panel.addNode(nn1);
//if (nn != null)
// panel.addEdgeFore(nn, nn1, 120);
//else
// fn = nn1;
panel.addEdge(cn, nn1, 70);
nn = nn1;
createGroup(nn1, Math.floor((Math.random()*10)+2));
}
//Add a relationship but it won't draw any line between 2 node.
//panel.addEdgeFore(fn, nn1, 120);
}
</script>
|