diff options
Diffstat (limited to 'recommend/templates/index.html')
| -rw-r--r-- | recommend/templates/index.html | 123 |
1 files changed, 0 insertions, 123 deletions
diff --git a/recommend/templates/index.html b/recommend/templates/index.html deleted file mode 100644 index b54901e..0000000 --- a/recommend/templates/index.html +++ /dev/null @@ -1,123 +0,0 @@ -<!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> |
