软件工程作业05

软件工程 https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1
作业要求 https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1/homework/10619
作业目标 家族树呈现
作业正文 如下
其他参考文献 baidu.com

GitHub地址

结队同学

刘智鑫 20177657

具体分工

胡楠:文档编写
刘智鑫:tree的实现

PSP表格

  Personal Software Process Stages 预估耗时 实际耗时
Planning 计划 300 600
Development 开发 300 600
Analysis 需求分析(学习新技术) 300 600
Design Spec 生成设计文档 60 60
Design Review 设计复审 60 60
Coding Standard 代码规范 30 60
Design 具体设计 60 110
Coding 具体编码 500 600
Code Review 代码复审 60 100
Test 测试 90 120
Reporting 报告 30 60
Test Repor 测试报告 30 60
Size Measurement 计算工作量 20 20
Postmortem 事后总结 30 30
Process Improvement Plan 提出过程改进计划 60 60
Estimate 这个任务需要多少时间 1930 3140

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

代码组织与内部实现设计

递归调用,有子孙的就把children(显示)给_children(不显示)暂存,便于折叠

 function click(d) {
		       if (d.children) {
		         d._children = d.children;
		         d.children = null;
		       } else {
		         d.children = d._children;
		         d._children = null;
		       }
		       update(d);// 折叠之后要重绘
		     }

将文本框中的内容存为json形式

var treeData = [{
         "name": "",
         "parent": "",
         "children": [{
             "name": "",
             "parent": "",
             "children": [{
                 "name": "",
                 "parent": ""
             }, {
                 "name": "",
                 "parent": "",
                 "children": [{
                     "name": "",
                     parent: ""
                 }]
             }, {
                 "name": "",
                 "parent": ""
             }, {
                 "name": "",
                 "parent": ""
             }]
         }, {
             "name": "",
             "parent": "",
             "children": [{
                 "name": "",
                 "parent": ""
             }, {
                 "name": "",
                 "parent": ""
             }, ]
         }, {
             "name": "",
             "parent": ""
         }, ]
     }];

设置树的布局

        var tree = d3.layout.tree()//使用默认设置创建一个新的树状布局
            .size([width, height - 200])//指定树布局的尺寸一个
            .separation(function (a, b) {
                return (a.parent == b.parent ? 1 : 2);//设置或取得两个节点之间的间距
            });

        var diagonal = d3.svg.diagonal()//svg形状
            .projection(function (d) {
                return [d.y, d.x];
            });

        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(40,0)");
        var link = svg.selectAll(".link")
            .data(links)
            .enter()
            .append("path")
            .attr("class", "link")
            .attr("d", diagonal);

        var node = svg.selectAll(".node")
            .data(nodes)
            .enter()
            .append("g")
            .attr("class", "node")
            .attr("transform", function (d) {
                return "translate(" + d.y + "," + d.x + ")";
            })

特点设计与展示

能折叠,有动画
帮助人更好的了解家族树

成果展示


目录说明和使用说明

在文本框中填入导师和学生的相关信息即可

测试人员运行网页

在GitHub中下载后打开

Github的代码签入记录

结对困难及解决方法

1.刚开始不知道怎么在网页上生成一棵折叠树,因为学过的html和css只是布局和一些基本按钮、文本框,百度了后了解到有d3、bootstrap框架,所以学习了d3的用法花了挺长时间。
2.界面十分简洁,界面方面的知识还需要以后加倍努力得学习。

评价队友

值得学习的地方:刘智鑫的专业学的比我的好太多了,我基本的很多东西都忘了,感谢刘智鑫的耐心讲解。
需要改进的地方:数据结构好像是大二上半学期的课程,我现在忘记的差不多了。需要复习一下了。

你可能感兴趣的:(软件工程作业05)