Part1. Junction information
Project Information
| project | address |
|---|---|
| The job | https://edu.cnblogs.com/campus/fzu/2019FZUSEZ/homework/8736 |
| Github project | https://github.com/JiuSiZhang/021700827-071703323.git |
| student ID | Full name | blog address |
|---|---|---|
| 021700827 | Zhangqi Rong | https://www.cnblogs.com/zhangjiusi/ |
| 071703323 | LU Yu Fei | https://www.cnblogs.com/0717fei/ |
Specific division of labor
Zhangqi Rong: design framework, code written
LU Yu Fei: UI design, landscaping late
Part2.PSP table
PSP table
| PSP2.1 | Personal Software Process Stages | Estimated time consuming (hours) | The actual time-consuming (hours) |
| Planning | plan | 0.5 | 0.5 |
| Estimate | Estimate how much time this task requires | 0.5 | 1 |
| Development | Develop | 10 | 9 |
| Analysis | Needs analysis (including learning new technologies) | 10 | 12 |
| Design Spec | Generate design documents | 0.5 | 0.5 |
| Design Review | Design Review | 0.5 | 1 |
| Coding Standard | Code specifications (development of appropriate norms for the current development) | 0.5 | 0.5 |
| Design | Specific design | 1 | 1 |
| Coding | Specific coding | 15 | 10 |
| Code Review | Code Review | 1 | 3 |
| Test | Test (self-test, modify the code, submit modifications) | 1 | 3 |
| Reporting | report | 1 | 1 |
| test repor | testing report | 1 | 1 |
| Size Measurement | Computing workload | 0.5 | 0.5 |
| Postmortem & Process Improvement Plan | Later summarized, and process improvement plan | 0.5 | 0.5 |
| total | 43 | 44.5 |
Part3. Directory organization, instructions for use
Instructions for use
Download 2.html file on GitHub project, open to use
highlighted: format must strictly abide by the agreement, the end of the line when empty without a single set of input, multi-group input, must have blank lines between each set of data.
Directory Description
Code is mainly used d3 framework, there are two ways to use d3
(1) files downloaded D3.js: d3.zip
(2) may further comprise a direct link to the network:
<script src="http://d3js.org/d3.v3.min.js"></script>However, when used to maintain valid network connection, it can not be used in case of disconnection.
The code that we use the second method, so just download 2.html, open to use
Part4. Description and problem-solving ideas Design Implementation Notes
The key part of a flowchart of the key (1) algorithm to achieve
The key lies in how to read the code data and converts it to the object frame can be used. Because multiple trees associated with more complex cases that may arise, and more trees exist independently and so on, so the achievements of some trouble. First, press the extraction line, divided keywords, keywords junction formed independently. Under normal circumstances, each set of data should be generated three trees, one academic tutor node layer, a layer where the degree DEGREES. So first extract mentor nodes, add nodes to a degree he ground it, and then for each degree, which students add, because the idea is not to start a rigorous, drawing on some of the first student ideas.
(2) the key code shows
* Get data in a text field way:
<label>师生信息：</label>
<textarea cols="50"rows="10"id="text"></textarea>
<input type="submit" value="确定" name="submit" onclick="GetTextAreaValue()" />* Processing of input data:
var str=document.all.text.value;//获取文本框的数据
arrstr=str.split('\n');//通过换行符分割
var next=new Map;//存边，第一维存名字，值是数据继续递归
var level=new Map;//存最高等级
var f=new Map;//存是否有父亲结点
var x=["博士生", "硕士生", "本科生"];//关键词
var vi=[];//存出现过的词
for(var i=0;i<arrstr.length;)
{
var j;
for(j=i;j<arrstr.length;j++)
{
if(arrstr[j]=="")
{
break;
}
}//到这边是一组数据
//第一层
var item=arrstr[i].split('：');//通过冒号分割
var tp=item[1];//导师结点
next[tp]=[];
level[tp]=item[0];
// console.log(tp);
vi.push(tp);
for(var l=i+1;l<j;l++)//第二层
{
for(var val of x)
{
//console.log(val);
if(arrstr[l].indexOf(val)!=-1)//如果该关键字存在
{
var item1=arrstr[l].split('：');
var z=item1[0]+tp;
// console.log(z);
next[tp].push(z);//建边
level[z]=val;
next[z]=[];//新建边数组
f[z]=1;//标记有父亲
vi.push(z);//收集关键字
break;
}
}
var s=item1[1].split('、');//通过顿号分割
for(var val of s)//第三层
{
//console.log(val);
next[z].push(val);
f[val]=1;
level[val]=item1[0];
vi.push(val);
}
}
i=j+1;
}
for(var val of vi)
{
if(f[val]==null)
{
// console.log(val);
var root=dfs(val,-1);//没有父亲的结点一定为根结点
//console.log(root);
}
}
function dfs(u,fa)//dfs递归建对象
{
var ss;
ss={};
ss.name=u;
ss.children=[];
var v=next[u];
if(v==null)
{
return ss;
}
for(var i=0;i<v.length;i++)
{
ss.children.push(dfs(v[i],u));
}
if(u.indexOf(fa)!=-1)
{
var t=u.substring(0, u.indexOf(fa));
ss.name=t;
}
return ss;
}* Add animation: stretched towards tree node, scaling
// Transition nodes to their new position.将节点过渡到一个新的位置-----主要是针对节点过渡过程中的过渡效果
//node就是保留的数据集，为原来数据的图形添加过渡动画。首先是整个组的位置
var nodeUpdate = node.transition() //开始一个动画过渡
.duration(duration) //过渡延迟时间,此处主要设置的是圆圈节点随斜线的过渡延迟
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });//YES
// Transition exiting nodes to the parent's new position.过渡现有的节点到父母的新位置。
//最后处理消失的数据，添加消失动画
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.x + "," + source.y + ")"; })//YES
.remove();
// 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 = {y: source.x0, x: source.y0};//YES
return diagonal({source: o, target: o}); //diagonal - 生成一个二维贝塞尔连接器, 用于节点连接图.
})
.attr('marker-end', 'url(#arrow)');
// 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};//NO
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.将旧的斜线过渡效果隐藏
nodes.forEach(function(d) {
d.x0 = d.y;
d.y0 = d.x;
});
}
//定义一个将某节点折叠的函数
// 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);
}
}Part5. Additional features of design and display
(1) unique design creativity, sense of design
* For each node filling head
* Add a background image
(2) the realization of ideas
By d3 library calls, set the corresponding parameter information
(3) Key Code
* Freely set the interface background
d3.select("body").style("background-image", "url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571756972&di=bdf0695f47523fcf88d876b50fa53608&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.16pic.com%2F00%2F39%2F66%2F16pic_3966891_b.jpg)");* Avatar filling of the characters node
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", "http://img.mp.sohu.com/upload/20170612/817b54ced4694d61b7fc1b0111c75450_th.png")
return "url(#pat)";(4) the results show
Part6. Unit testing
Use tools: mocha
Tutorial: https://blog.csdn.net/llmys/article/details/82562143 this is very clear and concise recommendation.
Page you can see, the direct construction of complex data to data processing test
var get_json = require('../get_json.js').get_json;
var expect = require('chai').expect
var str=`导师：张三
2016级博士生：天一、王二、吴五
2015级硕士生：李四、王五、许六
2016级硕士生：刘一、李二、李三
2017级本科生：刘六、琪七、司四
2018级本科生：老张、妃妃
2020级本科生：A、B、C
导师：老张
2025级本科生：a、b、c
2026级博士生：x、y、妃妃
导师：zp
2005级博士生：张三`;
var ans='{"name":"zp","children":[{"name":"2005级博士生","children":[{"name":"张三","children":[{"name":"2016级博士生","children":[{"name":"天一","children":[]},{"name":"王二","children":[]},{"name":"吴五","children":[]}]},{"name":"2015级硕士生","children":[{"name":"李四","children":[]},{"name":"王五","children":[]},{"name":"许六","children":[]}]},{"name":"2016级硕士生","children":[{"name":"刘一","children":[]},{"name":"李二","children":[]},{"name":"李三","children":[]}]},{"name":"2017级本科生","children":[{"name":"刘六","children":[]},{"name":"琪七","children":[]},{"name":"司四","children":[]}]},{"name":"2018级本科生","children":[{"name":"老张","children":[{"name":"2025级本科生","children":[{"name":"a","children":[]},{"name":"b","children":[]},{"name":"c","children":[]}]},{"name":"2026级博士生","children":[{"name":"x","children":[]},{"name":"y","children":[]},{"name":"妃妃","children":[]}]}]},{"name":"妃妃","children":[]}]},{"name":"2020级本科生","children":[{"name":"A","children":[]},{"name":"B","children":[]},{"name":"C","children":[]}]}]}]}]}';
describe('测试数据处理函数', function() {
it('生成的字符串应该等于ans', function() {
expect(get_json()).to.be.equal(ans);
});
});Part7. Github code check-in records
Part8. Code modules being experienced difficulties or knot and solutions
(1) Problem Description
一开始建树有问题，没办法处理复杂的数据情况
无法生成多颗独立存在的树
(2)做过哪些尝试
找人问，找网上代码，看同学发布的博客
(3)是否解决？
第一点解决，数据可以完美生成，第二点未解决，无法生成两颗独立存在的树，一但出现这种情况，除最后一棵树外其他树将无法操作。
(4)收获
学到了d3库的使用方法，js的基本语法和应用，对象的处理，数据格式的转换。
Part9.心得总结
张启荣：
评价一下我的队友
值得学习的地方：谦虚好学，很有责任心，思维严谨而且做的页面很好看。
需要改进的地方：两个人应该多一些沟通与交流。
卢昱妃：
十天速成一门新的语言是一个富有挑战的任务，自己的学习能力还有待提高，这次多亏有代码能力和学习能力都极强的队友全面帮助，才能使得项目推进如此顺利，通过这次结对，从队友身上学到了很多。结对训练完成以后还要继续加强前端的学习。个人觉得两个在结对配合和交流上还是十分顺畅，减少了交流故障造成的时间损耗，以后可以更多一点沟通与交流。