Create 树

xi1234567 · Apr 17, 2020 · fe27ee9 · fe27ee9
1 parent b99b93a
commit fe27ee9
Showing 1 changed file with 238 additions and 0 deletions.
diff --git a/树 b/树
@@ -0,0 +1,238 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8"
+    pageEncoding="UTF-8"%>
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<title>Insert title here</title>
+   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
+   <script src="WebContent/bootstrap/jquery-3.4.1.min.js"></script>
+   <script src="bootstrap/css/bootstrap.min.js"></script>
+            <style>
+   .node {
+  cursor: pointer;
+}
+
+.node circle {
+  fill: #fff;
+  stroke: steelblue;
+  stroke-width: 1.5px;
+}
+
+.node text {
+  font: 10px sans-serif;
+}
+
+.link {
+  fill: none;
+  stroke: #ccc;
+  stroke-width: 1.5px;
+}
+   </style>
+</head>
+<body> 
+
+   <script src="https://d3js.org/d3.v3.min.js"></script>
+    <script>
+var json = [
+  {
+	  "name": "张三",
+      "parent": "2",
+      "children": [{
+          "name": "2016级博士生",
+          "parent": "4",
+          "children": [{
+              "name": "天一",
+              "parent": "6"
+          }, {
+              "name": "王二",
+              "parent": "8",
+
+          }, {
+              "name": "吴五",
+              "parent": "10"
+          }, {
+              "name": "赵子龙",
+              "parent": "12"
+          },]
+
+
+      }, {
+          "name": "2015级硕士生",
+          "parent": "14",
+          "children": [{
+              "name": "李四",
+              "parent": "16"
+          }, {
+              "name": "王五",
+              "parent": "18"
+          }, {
+              "name": "许六",
+              "parent": "20"
+          }, {
+              "name": "张飞",
+              "parent": "22"                    
+          },]
+
+
+      }, {
+          "name": "2016级硕士生",
+          "parent":"24",
+        	  "children": [{
+                  "name": "刘一",
+                  "parent": "26"
+              }, {
+                  "name": "李二",
+                  "parent": "28"
+              }, {
+                  "name": "李三",
+                  "parent": "30"
+              }, {
+                  "name": "李五",
+                  "parent": "32"   
+              }, ]
+      }, ]
+  }];
+
+
+ var margin = {top: 20, right: 120, bottom: 20, left: 120},
+    width = 960 - margin.right - margin.left,
+    height = 800 - 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("body").append("svg")//声明与定义画布属性
+    .attr("width", width + margin.right + margin.left)
+    .attr("height", height + margin.top + margin.bottom)
+  .append("g")
+    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+
+ root = json[0];
+  root.x0 = height / 2;
+  root.y0 = 0;
+ 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", "600px");
+
+function update(source) {
+
+  // 计算新树图的布局
+  var nodes = tree.nodes(root).reverse(),
+      links = tree.links(nodes);
+
+  // 设置y坐标点，每层占180px
+  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", 1e-6)
+      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
+
+  nodeEnter.append("text")
+      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
+      .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 ? "lightsteelblue" : "#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-6);
+
+  nodeExit.select("text")
+      .style("fill-opacity", 1e-6);
+
+  // 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>
+
+</body>
+</html>