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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
treeData = {
name: "",
children: []
};
function deeper(route) {
$.getJSON("/api/builds" + route, (data) => {
let path = route.split("/");
let traverse = (obj, pp) => {
o = obj;
pp.forEach((p) => p != ""?
o = o.children.filter((n) => p == n.name)[0]
: null)
return o;
};
traverse(treeData, path).children = data
.filter((d) => d.probability > 0.01)
.map((d) => {
return {
name: d.name,
probability: d.probability,
children: [],
path: route + "/" + d.name
};
});
update(root);
});
}
deeper("");
let width = 1500,
height = 800;
let i = 0, duration = 300;
let tree = d3.layout.tree()
.size([width, height]);
let diagonal = d3.svg.diagonal()
.projection((d) => [d.x, d.y]);
let svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
let root = treeData;
root.x0 = 0;
root.y0 = width/2;
function update(source) {
let nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
let node = svg.selectAll("g.node")
.data(nodes, (d) => d.id || (d.id = ++i));
let nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", (d) => `translate(${source.x0}, ${source.y0})`)
.on("click", click);
nodeEnter.append("text")
.attr("dy", ".35em")
.text((d) => d.name)
.style("fill-opacity", 1e-6);
nodeEnter.append("image")
.attr("xlink:href", (d) => `/assets/${d.name.replace(/ /g, "-").toLowerCase()}.png`)
.attr("x", -16)
.attr("y", -16)
.attr("width", 32)
.attr("height", 32);
let nodeUpdate = node.transition()
.duration(duration)
.attr("transform", (d) => `translate(${d.x}, ${d.y})`);
nodeUpdate.select("circle")
.attr("r", 10);
nodeUpdate.select("text")
.style("fill-opacity", 1);
let nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", (d) => `translate(${source.x}, ${source.y})`)
.remove();
let link = svg.selectAll("path.link")
.data(links, (d) => d.target.id);
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", (d) => {
let o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});
link.transition()
.duration(duration)
.attr("d", diagonal);
link.exit().transition()
.duration(duration)
.attr("d", (d) => {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
nodes.forEach((d) => {
d.x0 = d.x;
d.y0 = d.y;
});
}
function click(d) {
deeper(d.path);
update(d);
}
</script>
</body>
</html>
|
