2020软件工程作业05

软件工程	https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1
作业要求	https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1/homework/10458
作业目标	家族树web
作业正文	见下文
参考文献	https://www.it610.com/article/3752779.htm

本次作业	https://www.cnblogs.com/codesasan/p/12718541.html
结队成员1	https://www.cnblogs.com/codesasan/
结队成员2	https://www.cnblogs.com/songqd/
GITHUB地址	https://github.com/sasan623/20177706-20176864/tree/master

一.结对信息

1.具体分工

徐磊：算法代码实现，前端开发设计，markdown编写。

宋齐盾：算法代码实现，github操作。

二.PSP表格

PSP2.1	Personal Software Process Stages	预估耗时（小时）	实际耗时（小时）
Planning	计划	1	1
Estimate	估计这个任务需要多少时间	24	36
Development	开发	3	3
Analysis	需求分析 (包括学习新技术)	3	5
Design Spec	生成设计文档	2	2
Design Review	设计复审	1	0.5
Coding Standard	代码规范 (为目前的开发制定合适的规范)	0.5	0.5
Design	具体设计	1.5	2
Coding	具体编码	6	8
Code Reviewt	代码复审	1	1.5
Test	测试（自我测试，修改代码，提交修改）	2	3
Reporting	报告	3	4
Test Repor	测试报告	1	1
Size Measurement	计算工作量	0.5	0.5
Postmortem & Process Improvement Plan	事后总结, 并提出过程改进计划	1	1
合计		50.5	69

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

• 说明算法的关键与关键实现部分流程图
  1.算法关键
  实现文本框内容转家族树，首先定义递归查找函数，查找是否有导师的学生也是导师的情况,若有此种情况则此树重构 ，用json数据存放成当前所有的树，然后按按json内容生成树。
  2.简单流程图
  
• 代码组织与内部实现设计（类图）
  
• 贴出你认为重要的/有价值的代码片段

  function check() {

    var result1 = 0;
    var result2 = 1;
    var length_now = getJsonLength(nodes.children);   
    for (var first = 0; first < length_now; first++) {
        if (nodes.children[first].name == find_name) {                     
        	
            nodes.children[first] = may_need;//这是该导师的学生为导师的那棵树的根节点
            //alert("add success");
            return result2;

        } else {
            check(nodes.children[first], find_name, may_need, keke);
            //return;
        }
    }

    return result1;

因为这是算法的关键，检查函数，遍历之前所有树的所有子节点，查找是否有导师的学生也是导师的情况,若有此种情况则此树重构，没有它，文本转换实现根本不可能。

四.附加特点设计与展示

1.设置缩放和平移家族树

var zoom = d3.behavior.zoom()

	.scaleExtent([.1,1])

	.on('zoom', function(){

		svg.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");

});

2.建立一个矩形的宽高用来存放头像并且添加头像

nodeEnter.append("rect")

.attr("x",-20)

.attr("y", -15)       //结点位置

.attr("width",40)      //矩形宽高

.attr("height",50)

.attr("rx",10)

.attr("fill", function(d){


//创建人物图片

var defs = svg.append("defs").attr("id", "imgdefs")

var catpattern = defs.append("pattern")
    .attr("id", "pat")
    .attr("height", 1)
    .attr("width", 1)
    .attr("patternContentUnits","objectBoundingBox")
						
catpattern.append("image")
.attr("width", "1.4")
.attr("height", "1")
.attr("xlink:href", "img/00.jpg")

return "url(#pat)";

3.定义家族树文本颜色，并设置好字体位置

nodeEnter.append("text")
  .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
  .attr("dy", "50")
  .attr("text-anchor", "middle")
  .text(function(d) { return d.name; })
  .style("fill", "#2dbb8a")
  .style("fill-opacity", 1);

4.实现成果展示

树状图的平移缩放

全过程

五.在博客中给出目录说明和使用说明

20177706-20176864

web

目录

家族树

• bootstrap框架包含样式以及jquery
• img里面放图片
• main里面为进入页面代码
• tree里面为生成家族树代码（文本框）

使用方法

所有文件下载到本地，压缩包解压，打开main，进入生成家族树的页面，在文本框中输入家族树文本形式，点击“生成”，即刻生成家族树
（建议使用eclipse，因为图片皆保存在相对路径）

文本格式

输入

学术家族树以文本形式输入，点击“创建家庭树”，即可。

导师：张三

2017级博士生：里斯、王五、嘻哈
2018级硕士生：阿三、考拉
2019级本科生：五四、胡静

导师：刘2

2016级博士生：天四、王九
2015级硕士生：李四
2016级硕士生：刘一
2017级本科生：刘一

导师：张三

2016级博士生：天一、王二、吴五
2015级硕士生：李四、王五、许六

导师：张三

2016级博士生：天一、王二、吴五
2015级硕士生：李四、王五、许六
2016级硕士生：刘一、李二、李三
2017级本科生：刘六、琪七、司四

输出

树的节点，鼠标点击后是可以缩放的。同时，支持呈现多棵树并存、两棵关联树共存等形式。（一起输入生成多棵树时，两文本中只间隔一行）

六.单元测试

测试工具：eclipse和火狐浏览器

七.贴出Github的代码签入记录

八.遇到的代码模块异常或结对困难及解决方法

困难1.家族树用哪个框架实现？
解决：考虑了G6，echarts，JQuery，最后还是选择了D3，因为有完整的参考手册。
困难2.文本框转实现转换的算法使用模糊？
解决：算法，数据结构基础不行，多看多敲多记多学

九.评价你的队友

@南城大侠
值得学习的地方：会使用很多小工具。
值得改进的地方：学习主动性有待提高。