软件工程第二次结队作业

这个作业属于哪个课程	https://edu.cnblogs.com/campus/fzu/SE2020
这个作业要求在哪里	https://edu.cnblogs.com/campus/fzu/SE2020/homework/11277
这个作业的目标	学习html、css、JavaScript语言，从程序员角度构造核心算法
学号	031802314 李辰钰 031802316 林佳伟
GitHub	https://github.com/gegeguojiayougegeguojiadeguoge/-

PSP

PSP2.1	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	50
Estimate	估计这个任务需要多少时间	390
Development	开发	300	420
Analysis	需求分析 (包括学习新技术)	660	660
Design Spec	生成设计文档	30	30
Design Review	设计复审	20	30
Coding Standard	代码规范 (为目前的开发制定合适的规范)	20	20
Design	具体设计	60	60
Coding	具体编码	240	240
Code Review	代码复审	30	120
Test	测试（自我测试，修改代码，提交修改）	20	20
Reporting	报告	15	30
Test Report	测试报告	15	20
Size Measurement	计算工作量	10	10
Postmortem & Process Improvement Plan	事后总结, 并提出过程改进计划	20	30
合计		1470	1740

解题思路描述与设计实现说明

1.数据输入的传送

2.树的生成和实现（重点）

代码展示：

                 <head>
			<meta charset="utf-8">
			<title>软件工程结队编程作业</title>
			<style type="text/css">
				.box1{
					 62.5rem;
					height: 62.5rem;
					margin: 0 auto;
					background-color: skyblue;
				}
				
				{
					margin:10;
					padding:10;
				}
				.nav{
					list-style: none;
					background-color:blue ;
					-webkit-dashboard-region: 62.5rem;
					margin: 3.125rem auto;
					overflow: hidden;
				}
				
				.nav li{
					float: left;
					 50%;
				}
				
				.nav a{
					display: block;
					 100%;
					text-align: center;
					padding: 0.3125rem 0;
					text-decoration: none;
					color: white;
					font-weight: bold;
				}
				
				.nav a:hover{
					background-color: darkred;
				}
			</style>
			<script type="text/javascript" src="d3.v3.min.js"></script>
			<script type="text/javascript" src="tree.js"></script>
			<link href="demo.css" type="text/css" rel="stylesheet" />
		</head>
		
		<body>
			<ul class="nav">
				<li><a href=#>INPUT</a></li>
				<li><a href=#>学术家族树</a></li>
	
			</ul>
			
			<div class="bg-container"></div>
			    <div class="flex-item1">
			        <p id="titlename">INPUT</p>
			    </div>
			    <div class="flex-item2">
			        <textarea style="background:none;border-style:none;" id="user"></textarea>
			        </br>
			        <button id="textbotton" onClick="chase()">INPUT</button>
			    </div>
			    <div class="flex-item3">
			        <p id="show-tree">学术家族树</p>
			    </div>
			</div>			
			<div class="box1"></div>
			</body>

界面代码（虽然我觉得做的不是很好），接口代码，上图：

        function shuInit(ttmpp) {
             
             var margin = {
                     top: 20,
                     right: 120,
                     bottom: 20,
                     left: 50
                 },
                 width = 2000 - margin.right - margin.left,
                 height = 960 - 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("#show-tree")
             .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 = treeData[ttmpp]; //treeData为上边定义的节点属性
         root.x0 = height / 2;
         root.y0 = 0;

         update(root);

         d3.select(self.frameElement).style("height", "500px");

         function update(source) {
             // Compute the new tree layout.计算新树图的布局
             var nodes = tree.nodes(root).reverse(),
                 links = tree.links(nodes);
                        nodes.forEach(function(d) {
                    d.y = d.depth * 180;
                });
    
                 // Update the nodes…每个node对应一个group
                 var node = svg.selectAll("g.node")
                     .data(nodes, function(d) {
                         return d.id || (d.id = ++i);
                     }); //data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定
                var nodeEnter = node.enter().append("g")
                 .attr("class", "node") //attr设置html属性，style设置css属性
                 .attr("transform", function(d) {
                     return "translate(" + source.y0 + "," + source.x0 + ")";
                 })
                 .on("click", click);

树的生成！（核心算法了）

附加特点设计与展示

我怎么感觉都是很正常的思路，没啥特点哈哈（可能我太菜了）

成果展示：

目录及使用说明

额，好像没有打包上传
demo.html是整体布局（包括css调用，js调用，我好像css都写在style里面并没有用到css）
REMAND.md是说明书
tree.js是算法
测试运行：把文件下载到同一个目录下直接用Chrome浏览器运行就可以，打开界面有现实在哪里输入

commit记录

困难及收获

困难：

面对要求的http、css、JavaScript等工具真的是从来没接触过，但是问题就是用来解决的，只好自学了。
在开发过程中遇到的问题实在是太多了，页面布局开发格外的困难。
树到底应该怎么写！！！！

收获：

通过这次作业学会了使用一些比较基础的网页开发工具，以后应该还是挺有用的。
失败是成功之母真的在学软工这个课有着深刻的教训，太深刻了。（debug太痛苦了，做出来真的好爽！）

队友评价：

他真的挺爱玩的（有点累，但是做出来还是挺开心的）