家族樹

• 結對同窗

• 本次做業博客

• github地址
• 分工：0317：寫代碼，寫博客 莫得東西：收集素材，設計框架
• PSP：

PSP2.1	Personal Software Process Stages	預估耗時（分鐘）	實際耗時（分鐘）
Planning	計劃	30	30
Estimate	估計這個任務須要多少時間	30	30
Development	開發	600	550
Analysis	需求分析 (包括學習新技術)	800	850
Design Spec	生成設計文檔	30	30
Design Review	設計複審	30	30
Coding Standard	代碼規範 (爲目前的開發制定合適的規範)	30	30
Design	具體設計	100	110
Coding	具體編碼	800	900
Code Review	代碼複審	60	60
Test	測試（自我測試，修改代碼，提交修改）	60	50
Reporting	報告	60	60
Test Report	測試報告	30	30
Size Measurement	計算工做量	30	30
Postmortem & Process Improvement Plan	過後總結, 並提出過程改進計劃	30	30
合計		2720	2820

• 解題思路：
  • 代碼組織與內部實現設計：代碼就是html，首先進行數據處理，而後根據節點和邊進行建圖。從根節點經過d3框架渲染樹形結構。
  • 關鍵代碼和流程圖：
    • 代碼：
      • 輸入：
      • 讀取數據：var str=document.all.text.value;//讀取數據
      • 數據處理：

      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 = 2300 - margin.right - margin.left,
                                height = 2300 - margin.top - margin.bottom;
      s
      
      
                    var i = 0,
                    duration = 750;//過渡延遲時間
      
      
                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 + ")");
      
      
                //定義節點屬性
                root.x0 = height / 2;
                root.y0 = 0;
      
                update(root);
      
                d3.select(self.frameElement).style("height", "1600px");
      
                function update(source) {
      
                  //計算新樹圖的佈局
                  var nodes = tree.nodes(root).reverse(),
                      links = tree.links(nodes);
      
                  //設置y座標點
                  nodes.forEach(function(d) { d.y = d.depth * 250; });
                  var node = svg.selectAll("g.node")
                      .data(nodes, function(d) { return d.id || (d.id = ++i); });                
                  //新增節點數據集，設置位置
                  var nodeEnter = node.enter().append("g")  
                      .attr("class", "node") //attr設置html屬性，style設置css屬性
                      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
                      .on("click", click);               
                  //添加鏈接點
                    .attr("x",-20)
                    .attr("y", -15)       //結點位置
                    .attr("width",50)      //矩形寬高
                    .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", "http://b-ssl.duitang.com/uploads/item/201403/23/20140323215226_kFcax.jpeg") //圖片地址
      
                    return "url(#pat)";
      
                })               
                  nodeEnter.append("text")
                    .attr("x", function(d) { return d.children || d._children ? 13 : 13; })
                    .attr("dy", "50")
                    .attr("text-anchor", "middle")
                    .text(function(d) { return d.name; })
                    .style("fill", "#2dbb8a")
                    .style("fill-opacity", 1);
                  //將節點過渡到一個新的位置
                  //node就是保留的數據集，爲原來數據的圖形添加過渡動畫
                  var nodeUpdate = node.transition()  //開始一個動畫過渡
                      .duration(duration)  //過渡延遲時間
                      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });//YES         
                  //過渡現有的節點到父母的新位置。
                  //處理數據，添加消失動畫
                  var nodeExit = node.exit().transition()
                      .duration(duration)
                      .attr("transform", function(d) { return "translate(" + source.x + "," + source.y + ")"; })//YES
                      .remove();
                  //再處理連線集合
                  var link = svg.selectAll("path.link")
                      .data(links, function(d) { return d.target.id; });
                  //添加新的連線
                  link.enter().insert("path", "g")
                      .attr("class", "link")
                      .attr("d", function(d) {
                        var o = {y: source.x0, x: source.y0};
                        return diagonal({source: o, target: o});  //生成一個鏈接器, 用於節點鏈接圖.
                      })
                    .attr('marker-end', 'url(#arrow)');              
                  //將斜線過渡到新的位置
                  //添加過渡動畫
                  link.transition()
                      .duration(duration)
                      .attr("d", diagonal);              
                  //過渡現有的斜線到父母的新位置。
                  //添加過渡動畫
                  link.exit().transition()
                      .duration(duration)
                      .attr("d", function(d) {
                        var o = {x: source.x, y: source.y};
                        return diagonal({source: o, target: o});
                      })
                      .remove();
      
                  //將舊的斜線過渡效果隱藏
                  nodes.forEach(function(d) {
                    d.x0 = d.y;
                    d.y0 = d.x;
                  });
                }
                //切換子節點事件
                function click(d) {
                  if (d.children) {
                    d._children = d.children;
                    d.children = null;
                  } else {
                    d.children = d._children;
                    d._children = null;
                  }
                  update(d);
                }
            }

• 創意：每一個節點都有頭像
  • 成果：
• 問題及解決：
  • 問題：兩棵樹沒法共存操做，一旦共存就只能看，有幾棵樹不能操做。剛開始無從入手，根本沒有頭緒。
  • 行動：百度搜索、找前端相關視頻學習、找其餘同窗問怎麼作（這個最有用）。
  • 解決：兩顆樹仍是不會
  • 收穫：雖然沒學到多少，但從百度和視頻中也對前端有了必定的認識。還有獨立學習的能力，以及能夠製做一個簡單的網頁。
• 目錄說明：
  • 首先是框架，這次用的是d3框架，用的是直接包含網絡的連接：
  • 使用方面，直接下載咱們Github中的家族樹.html，打開方式選擇谷歌瀏覽器便可進入，由於用的是包含網絡的連接，因此不須要下載d3的文件，可是得能正常上網。
• 評價隊友：
  • 031702125：認真學習相關知識，分配任務後會很專一去作。
  • 031702149：比較能利用現有資源，從網上或同窗處學到東西。可是就是有時候太過馬虎，考慮問題不會很細心。