軟件工程實踐第五次做業

時間 2019-11-18

標籤軟件工程實踐第五简体版

原文原文鏈接

軟件工程第五次做業————結對做業

第二次結對做業————實現學術家族樹

1、結對信息傳送門

博客地址：
Yuqiancha 學號：061700232
博客做業地址：http://www.javashuo.com/article/p-ycmzvips-bd.html
zhazhahui 學號：131700114
博客做業地址：http://www.javashuo.com/article/p-tozzqqaw-bx.html
Github地址：
(https://github.com/54zhazhahui/131700114-061700232)css

2、具體分工

Yuqiancha：部分代碼，測試
zhazhahui：部分代碼，測試html

PSP表格

PSP	Personal Software Process Stages	預估耗時（分鐘）	實際耗時（分鐘）
Planning	計劃	30	40
Estimate	估計這個任務須要多少時間	30	40
Development	開發	150	120
Analysis	需求分析 (包括學習新技術)	950	750
Design Spec	生成設計文檔	30	30
Design Review	設計複審	30	60
Coding Standard	代碼規範 (爲目前的開發制定合適的規範)	60	30
Design	具體設計	60	90
Coding	具體編碼	480	600
Code Review	代碼複審	60	90
Test	測試（自我測試，修改代碼，提交修改）	180	240
Reporting	報告	30	30
Test Repor	測試報告	60	60
Size Measurement	計算工做量	10	60
Postmortem & Process Improvement Plan	過後總結, 並提出過程改進計劃	30	60
合計		2200	2300

4、解題思路描述與設計實現說明

對咱們來講此次此次實驗的難度是比較大的，兩我的都沒有接觸過前端知識，徹底的零基礎。在這種狀況下，咱們仍是在網上認真學習了不少。可是時間真的是過短了，咱們在短期功利的學習了一些知識之後，在基於網上d3上面的代碼，完成了此次實驗。
首先代碼是html，進行數據輸入之後，一行一行的截取，而後找裏面的關鍵字那就先用split()把整個輸入內容按照那個"換行符"分組，若是是按順序輸入直接用就行，若是不是，就按照關鍵字找，遍歷list數組，在內容裏面找關鍵字，而後，好比遍歷數組，找第幾個裏面有"導師"，找到以後建立導師數組，把冒號以後的內容再按"頓號分組"，把他們放進導師數組。大概就是這樣的作法。
主要代碼前端

<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>