/
svg.tree.rotate.html
71 lines (53 loc) · 2.5 KB
/
svg.tree.rotate.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>eChart.js / svg.tree.rotate</title>
<link rel="stylesheet" href="../node_modules/easycss-core/build/easycss.min.css">
<script src="../node_modules/clay-core/build/clay-core.js"></script>
<script src="../node_modules/clay-2d/build/clay-2d.js"></script>
<script src="../node_modules/clay-chart/build/clay-chart.js"></script>
<script src="../data/program.json.js"></script>
</head>
<body>
<script>
var bezier = $svg.bezier().setType(340, 340, "circle").setL(50);
var text = $svg.text().setSize(7).setColor('gray').setAlign('left', 'middle');
$$('<svg></svg>').attr('width', 700).attr('height', 700).appendTo('body').find('g').data($chart.tree({
// 目标树
"type": "circle",
"radius": 300, "cx": 350, "cy": 350,
// 数据结构
"root": initTree => initTree,
"child": parentTree => parentTree.children,
"id": treedata => treedata.name
})(program.data).node).enter('g').appendTo('svg')
.attr('id', data => data.id).attr('left', data => data.left).attr('top', data => data.top)
.loop(function (data, index, target) {
window.setTimeout(function () {
// 绘制连线
if (data.pid) {
var pnode = $$('[id=' + data.pid + ']');
$$('<path>')
.css({ "fill": "none", "stroke": "gray" })
.attr('d', bezier(+pnode.attr('left'), +pnode.attr('top'), data.left, data.top))
.appendTo(target)
}
// 绘制结点
$$('<circle stroke-width="1" fill="#ea779e" r="3">')
.attr('cx', data.left).attr('cy', data.top)
.appendTo(target);
// 绘制文字
if (data.pid) {
var newP = $$.move(data.left - 350, data.top - 350, 5, data.left, data.top);
text(newP[0], newP[1], data.id, data.deg).appendTo(target);
} else {
text(data.left + 10, data.top, data.id).appendTo(target);
}
}, index * 7);
});
</script>
</body>
</html>