diff options
| author | schneefux <schneefux+commit@schneefux.xyz> | 2017-05-21 13:25:22 +0200 |
|---|---|---|
| committer | schneefux <schneefux+commit@schneefux.xyz> | 2017-05-21 13:25:22 +0200 |
| commit | 8b0da6d25c9130c87455ffdbb26af5e75d44b5af (patch) | |
| tree | 8d847e20b57df34881c482c8eb21a4d5f88369f4 /recommend/templates | |
| parent | 5a0b7abcaac0d908da8cf9a51f16c94cc54fbd1e (diff) | |
| download | analyzer-8b0da6d25c9130c87455ffdbb26af5e75d44b5af.tar.gz analyzer-8b0da6d25c9130c87455ffdbb26af5e75d44b5af.zip | |
Diffstat (limited to 'recommend/templates')
| -rw-r--r-- | recommend/templates/index.html | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/recommend/templates/index.html b/recommend/templates/index.html new file mode 100644 index 0000000..b54901e --- /dev/null +++ b/recommend/templates/index.html @@ -0,0 +1,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> |