|
|
| Line 92: |
Line 92: |
| | <h3>Attributions</h3> | | <h3>Attributions</h3> |
| | </div> | | </div> |
| | + | |
| | + | <img src="https://static.igem.org/mediawiki/2017/c/c1/T--KUAS_Korea--Attribution.png"> |
| | + | |
| | + | |
| | <div class="container-fluid" style="text-align:center"> | | <div class="container-fluid" style="text-align:center"> |
| | | | |
| Line 98: |
Line 102: |
| | <div class="col-md-12" id="djxmfl"> | | <div class="col-md-12" id="djxmfl"> |
| | </div> | | </div> |
| − | <script>
| |
| − |
| |
| − | var margin = {top: 20, right: 20, bottom: 20, left: 220},
| |
| − | width = 1050 - margin.right - margin.left,
| |
| − | height = 950 - margin.top - margin.bottom;
| |
| − |
| |
| − | var i = 0,
| |
| − | duration = 750,
| |
| − | root;
| |
| − |
| |
| − | var tree = d3.layout.tree()
| |
| − | .size([height, width]);
| |
| − |
| |
| − | var diagonal = d3.svg.diagonal()
| |
| − | .projection(function(d) { return [d.y, d.x]; });
| |
| − |
| |
| − | var svg = d3.select("#djxmfl").append("svg:svg")
| |
| − | .attr("width", width + margin.right + margin.left)
| |
| − | .attr("height", height + margin.top + margin.bottom)
| |
| − | .append("g")
| |
| − | .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
| |
| − |
| |
| − | d3.json("//2016.igem.org/Team:Korea_U_Seoul/Assets/attribuitionjson?action=raw", function(error, Korea_U_Seoul) {
| |
| − | if (error) throw error;
| |
| − |
| |
| − | root = Korea_U_Seoul;
| |
| − | root.x0 = height / 2;
| |
| − | root.y0 = 50;
| |
| − |
| |
| − | function collapse(d) {
| |
| − | if (d.children) {
| |
| − | d._children = d.children;
| |
| − | d._children.forEach(collapse);
| |
| − | d.children = null;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | root.children.forEach(collapse);
| |
| − | update(root);
| |
| − | });
| |
| − |
| |
| − | d3.select(self.frameElement).style("height", "950px");
| |
| − |
| |
| − | function update(source) {
| |
| − |
| |
| − | // Compute the new tree layout.
| |
| − | var nodes = tree.nodes(root).reverse(),
| |
| − | links = tree.links(nodes);
| |
| − |
| |
| − | // Normalize for fixed-depth.
| |
| − | nodes.forEach(function(d) { d.y = d.depth * 180; });
| |
| − |
| |
| − | // Update the nodes…
| |
| − | var node = svg.selectAll("g.node")
| |
| − | .data(nodes, function(d) { return d.id || (d.id = ++i); });
| |
| − |
| |
| − | // Enter any new nodes at the parent's previous position.
| |
| − | var nodeEnter = node.enter().append("g")
| |
| − | .attr("class", "node")
| |
| − | .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
| |
| − | .on("click", click);
| |
| − |
| |
| − | nodeEnter.append("circle")
| |
| − | .attr("r", 2e-6)
| |
| − | .style("fill", function(d) { return d._children ? "yellow" : "#fff"; });
| |
| − |
| |
| − | nodeEnter.append("text")
| |
| − | .attr("x", function(d) { return d.children || d._children ? -20 : 20; })
| |
| − | .attr("dy", ".35em")
| |
| − | .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
| |
| − | .text(function(d) { return d.name; })
| |
| − | .style("fill-opacity", 1e-6);
| |
| − |
| |
| − | // Transition nodes to their new position.
| |
| − | var nodeUpdate = node.transition()
| |
| − | .duration(duration)
| |
| − | .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
| |
| − |
| |
| − | nodeUpdate.select("circle")
| |
| − | .attr("r", 4.5)
| |
| − | .style("fill", function(d) { return d._children ? "yellow" : "#fff"; });
| |
| − |
| |
| − | nodeUpdate.select("text")
| |
| − | .style("fill-opacity", 1);
| |
| − |
| |
| − | // Transition exiting nodes to the parent's new position.
| |
| − | var nodeExit = node.exit().transition()
| |
| − | .duration(duration)
| |
| − | .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
| |
| − | .remove();
| |
| − |
| |
| − | nodeExit.select("circle")
| |
| − | .attr("r", 1e-5);
| |
| − |
| |
| − | nodeExit.select("text")
| |
| − | .style("fill-opacity", 1e-5);
| |
| − |
| |
| − | // Update the links…
| |
| − | var link = svg.selectAll("path.link")
| |
| − | .data(links, function(d) { return d.target.id; });
| |
| − |
| |
| − | // Enter any new links at the parent's previous position.
| |
| − | link.enter().insert("path", "g")
| |
| − | .attr("class", "link")
| |
| − | .attr("d", function(d) {
| |
| − | var o = {x: source.x0, y: source.y0};
| |
| − | return diagonal({source: o, target: o});
| |
| − | });
| |
| − |
| |
| − | // Transition links to their new position.
| |
| − | link.transition()
| |
| − | .duration(duration)
| |
| − | .attr("d", diagonal);
| |
| − |
| |
| − | // Transition exiting nodes to the parent's new position.
| |
| − | link.exit().transition()
| |
| − | .duration(duration)
| |
| − | .attr("d", function(d) {
| |
| − | var o = {x: source.x, y: source.y};
| |
| − | return diagonal({source: o, target: o});
| |
| − | })
| |
| − | .remove();
| |
| − |
| |
| − | // Stash the old positions for transition.
| |
| − | nodes.forEach(function(d) {
| |
| − | d.x0 = d.x;
| |
| − | d.y0 = d.y;
| |
| − | });
| |
| − | }
| |
| − |
| |
| − | // Toggle children on click.
| |
| − | function click(d) {
| |
| − | if (d.children) {
| |
| − | d._children = d.children;
| |
| − | d.children = null;
| |
| − | } else {
| |
| − | d.children = d._children;
| |
| − | d._children = null;
| |
| − | }
| |
| − | update(d);
| |
| − | }
| |
| − |
| |
| − | </script>
| |
| | | | |
| | </div> | | </div> |
