From 5c3130047bddb8c355112dfaea2febf8b1d89375 Mon Sep 17 00:00:00 2001 From: Shanaaz Deo Date: Sat, 22 Oct 2016 14:58:59 -0700 Subject: [PATCH] Create script.js --- stylesheets/script.js | 188 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 188 insertions(+) create mode 100644 stylesheets/script.js diff --git a/stylesheets/script.js b/stylesheets/script.js new file mode 100644 index 0000000..560c384 --- /dev/null +++ b/stylesheets/script.js @@ -0,0 +1,188 @@ +var w = 600, + h = 800, + radius = 20, + node, + link, + root; + +var force = d3.layout.force() + .on("tick", tick) + .charge(function(d) { + return -900; + }) + .linkDistance(function(d) { + return d.target._children ? 50 : 110; + }) + .size([w, h - 180]); + +var svg = d3.select("body").append("svg") + .attr("width", w) + .attr("height", h); + +root = classes[0]; //set root node +root.fixed = true; +root.x = w / 2; +root.y = h / 2 - 75; +update(); + +function update() { + var nodes = flatten(root), + links = d3.layout.tree().links(nodes); + + if (!nodes){ + // Restart the force layout. + force + .nodes(nodes) + .links(links) + .start(); + + // Update the links… + link = svg.selectAll(".link") + .data(links); + + // Enter any new links. + link.enter().insert("svg:line", ".node") + .attr("class", "link") + .attr("x1", function(d) { + return d.source.x; + }) + .attr("y1", function(d) { + return d.source.y; + }) + .attr("x2", function(d) { + return d.target.x; + }) + .attr("y2", function(d) { + return d.target.y; + }); + + // Exit any old links. + link.exit().remove(); + + // Update the nodes… + node = svg.selectAll("circle.node") + .data(nodes) + .style("fill", color); + + node.transition() + .attr("r", radius); + + // Enter any new nodes. + node.enter().append("svg:circle") + .attr("class", "node") + .attr("cx", function(d) { + return d.x; + }) + .attr("cy", function(d) { + return d.y; + }) + .attr("r", radius) + .style("fill", color) + .call(force.drag); + + node.append("title") + .text(function(d) { + return d.class; + }); + + // Exit any old nodes. + node.exit().remove(); + + title = svg.selectAll("node.title") + .data(nodes); + + // Enter any new titles. + title.enter() + .append("text") + .attr("class", "title") + .attr("dx", function(d) { + return -d.name.length * 2.8; + }) + .attr("dy", 40) + .text(function(d) { + return d.name; + }); + + // Exit any old titles. + title.exit().remove(); + + } + +} + +function tick() { + link.attr("x1", function(d) { + return d.source.x; + }) + .attr("y1", function(d) { + return d.source.y; + }) + .attr("x2", function(d) { + return d.target.x; + }) + .attr("y2", function(d) { + return d.target.y; + }); + + node.attr("cx", function(d) { + return d.x; + }) + .attr("cy", function(d) { + return d.y; + }); + + title.attr("transform", function(d) { + return "translate(" + d.x + "," + d.y + ")"; + }); +} + +// Color leaf nodes orange, and packages white or blue. +function color(d) { + if (d._children) { + return "#95a5a6"; + } else { + switch (d.group) { + case 0: //dark blue + return "#081F3F"; + break; + case 1: //yellow + return "#FCB326"; + break; + case 2: //teal + return "#00B2A5"; + break; + case 3: //pink + return "#EE1F60"; + break; + case 4: //bright green + return "#CFDD45"; + break; + case 5: //pale orange + return "#EC6851"; + break; + case 6: //blue + return "#51758D"; + break; + default: + return "#53626F"; + } + } +} + +// Returns a list of all nodes under the root. +function flatten(root) { + var nodes = [], + i = 0; + + function recurse(node) { + if (node.children) node.size = node.children.reduce(function(p, v) { + return p + recurse(v); + }, 0); + if (!node.id) node.id = ++i; + nodes.push(node); + return node.size; + } + + root.size = recurse(root); + return nodes; +}