軟件工程2019實踐第五次做業
軟件工程第五次做業————結對做業
第二次結對做業————實現學術家族樹
1、結對信息 傳送門
博客地址：
Yuqiancha 學號：061700232
博客做業地址：http://www.javashuo.com/article/p-ycmzvips-bd.htmlcss
zhazhahui 學號：131700114
博客做業地址：http://www.javashuo.com/article/p-tozzqqaw-bx.htmlhtml
Github地址：
(https://github.com/54zhazhahui/131700114-061700232)前端
2、具體分工
Yuqiancha：部分代碼，測試
zhazhahui：部分代碼，測試node
PSP表格git
| PSP2.1 | Personal Software Process Stages | 預估耗時（分鐘） | 實際耗時（分鐘） |
|---|---|---|---|
| Planning | 計劃 | 120 | 120 |
| Estimate | 估計這個任務須要多少時間 | 3600 | 7200 |
| Development | 開發 | 60 | 60 |
| Analysis | 需求分析 (包括學習新技術) | 60 | 120 |
| Design Spec | 生成設計文檔 | 30 | 30 |
| Design Review | 設計複審 | 60 | 30 |
| Coding Standard | 代碼規範 (爲目前的開發制定合適的規範) | 60 | 60 |
| Design | 具體設計 | 120 | 120 |
| Coding | 具體編碼 | 120 | 180 |
| Code Review | 代碼複審 | 120 | 120 |
| Test | 測試（自我測試，修改代碼，提交修改） | 120 | 180 |
| Reporting | 報告 | 120 | 150 |
| Test Repor | 測試報告 | 30 | 60 |
| Size Measurement | 計算工做量 | 30 | 30 |
| Postmortem & Process Improvement Plan | 過後總結, 並提出過程改進計劃 | 60 | 120 |
| 合計 | 3600 | 9600 |
4、解題思路描述與設計實現說明
對咱們來講此次此次實驗的難度是比較大的，兩我的都沒有接觸過前端知識，徹底的零基礎。在這種狀況下，咱們仍是在網上認真學習了不少。可是時間真的是過短了，咱們在短期功利的學習了一些知識之後，在基於網上d3上面的代碼，完成了此次實驗。
首先代碼是html，進行數據輸入之後，一行一行的截取，而後找裏面的關鍵字那就先用split()把整個輸入內容按照那個"換行符"分組，若是是按順序輸入直接用就行，若是不是，就按照關鍵字找，遍歷list數組，在內容裏面找關鍵字，而後，好比遍歷數組，找第幾個裏面有"導師"，找到以後建立導師數組，把冒號以後的內容再按"頓號分組"，把他們放進導師數組。大概就是這樣的作法。
主要代碼github
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<label>輸入：</label>
<textarea cols="50"rows="5"id="text"></textarea>
<input type="submit" value="查看" name="submit" onclick="GetTextAreaValue()" />
<script>
d3.select("body").style("background-image", "url(http://bbs.212300.com/data/attachment/forum/201910/14/163604wb2ehf9eyhzrbyet.jpg)");
function GetTextAreaValue()
{
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 map=new Map();var vi=[];
map["導師"]=4;map["博士生"]=3;map["碩士生"]=2;map["本科生"]=1;
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];
vi.push(tp);
for(var l=i+1;l<j;l++)
{
for(var val of x)
{
if(arrstr[l].indexOf(val)!=-1)
{
var item1=arrstr[l].split('：');
var z=item1[0]+tp;
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)
{
var root=dfs(val,-1);
}
}
function dfs(u,fa)
{
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;
}
var svg;
d3.selectAll("svg").remove();
var margin = {top: 50, right: 20, bottom: 20, left: 20},
width = 1500 - margin.right - margin.left,
height = 1500 - margin.top - margin.bottom;
var i = 0,
duration = 500;//過渡延遲時間
var tree = d3.layout.tree()//建立一個樹佈局
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.x, d.y]; });//建立新的斜線生成器
// Setup zoom and pan
var zoom = d3.behavior.zoom()
.scaleExtent([.1,1])
.on('zoom', function(){
svg.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
});
//聲明與定義畫布屬性
svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.call(zoom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//treeData爲上邊定義的節點屬性
root.x0 = height / 2;
root.y0 = 0;
update(root);
d3.select(self.frameElement).style("height", "1600px");
function update(source) {
// Compute the new tree layout.計算新樹圖的佈局
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.設置y座標點，每層佔250px
nodes.forEach(function(d) { d.y = d.depth * 250; });
// Update the nodes…每一個node對應一個group
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });//data()：綁定一個數組到選擇集上，數組的各項值分別與選擇集的各元素綁定
// Enter any new nodes at the parent's previous position.新增節點數據集，設置位置
var nodeEnter = node.enter().append("g") //在 svg 中添加一個g，g是 svg 中的一個屬性，是 group 的意思，它表示一組什麼東西，如一組 lines ， rects ，circles 其實座標軸就是由這些東西構成的。
.attr("class", "node") //attr設置html屬性，style設置css屬性
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click);
nodeEnter.append("rect")
.attr("x",-20)
.attr("y", -10)
.attr("width",30)
.attr("height",30)
.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", "timg.jpg")
return "url(#pat)";
})
// .style("fill", "#dff0e7");d 表明數據，也就是與某元素綁定的數據。
nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? 10 : 10; })
.attr("dy", "40")
.attr("text-anchor", "middle")
.text(function(d) { return d.name; })
.style("fill", "#2dbb8a")
.style("fill-opacity", 1);
// 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);
}
}
</script>
</body>
五.附加特色設計與展現
6、目錄說明和使用說明
7、單元測試
8、Github的代碼簽入記錄
九.遇到的代碼模塊異常或結對困難及解決方法
遇到的主要問題就是在處理輸入數據時的問題。剛開始數據很難處理，函數運用不許確。
解決辦法：在網上學習了不少方法解決。真的是太難了。數組
10、評價隊友
Yuqiancha：此次實驗真的太難了（大聲哭），隊友也很給力，在咱們兩個不懈努力（瀕臨崩潰）的狀況下，仍是大概完成了。app
zhazhahui：隊友比較給力，我以前對前端徹底不瞭解，都是隊友帶個人。svg
相關文章
- 1. 軟件工程實踐2019第五次做業
- 2. 軟件工程實踐2019第五次做業--結對編程的實現
- 3. 軟件工程實踐2019第四次做業
- 4. 軟件工程實踐2019第二次做業
- 5. 軟件工程實踐2019第三次做業
- 6. 軟件工程實踐2019第一次做業
- 7. 2019軟件工程實踐——第一次做業
- 8. 2019軟件工程實踐——第三次做業
- 9. 2019軟件工程實踐——第二次做業
- 10. 2019軟件工程實踐——第四次做業
- 更多相關文章...
- • Thymeleaf項目實踐 - Thymeleaf 教程
- • XSL-FO 軟件 - XSL-FO 教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • Git五分鐘教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章