软件工程----------第五次作业

软件工程	https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1
作业要求	https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1/homework/10619
作业目标	家族树的实现
作业正文	https://www.cnblogs.com/mao-liu/p/12721952.html
其他参考文献	https://www.baidu.com

 

 

 

 

 

 

 

 

 

 

零、写在前面的话

上次的作业中，大家做出了不同风格的原型设计，有一些是Web风格的，不少是移动终端风格的；采用的原型工具有墨刀、Axure等；有一些组还通过思维导图来细化功能逻辑；你们通过实践的方式，体会了从几段用户视角的文字描述，到初见软件原型的过程，掌握了原型模型开发的能力，学会了原型开发工具。这些，都将为你们下一个阶段的组队开始系统化的软件开发打下基础。在这些作业中，也看到一些不足：一些组抓的用户“痛点”不够准确和到位，很多组的原型就是一个简化或直男版的微信雏形原型，虽然这是一个社交软件，但和微信或QQ的区别是什么？ 同时，这又是一个轻度使用的软件，做成独立的APP或web，是否会存在用户或活跃度不足的问题。采用什么样形式的原型，既要考虑到满足用户的需求，又要考虑到后期的推广和软件长远的生命力。所谓的“杀手”功能，就是要考虑到现实的痛点，又要比别人活得更“旺盛”。另外，大家对于结对的形式，也有了新的体会。两个人共同完成一份作业，互动交流，激荡创新。

本次作业要求结对完成。

 

github地址：https://github.com/xcy-hub/familytree

PSP是卡耐基梅隆大学（CMU）的专家们针对软件工程师所提出的一套模型：Personal Software Process (PSP， 个人开发流程，或称个体软件过程)。

PSP2.1	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	40	45
Estimate	估计这个任务需要多少时间	35	40
Development	开发	50	45
Analysis	需求分析 (包括学习新技术)	30	35
Design Spec	生成设计文档	20	25
Design Review	设计复审	25	20
Coding Standard	代码规范 (为目前的开发制定合适的规范)	40	30
Design	具体设计	60	65
Coding	具体编码	120	160
Code Review	代码复审	30	45
Test	测试（自我测试，修改代码，提交修改）	120	125
Reporting	报告	45	40
Test Repor	测试报告	30	30
Size Measurement	计算工作量	20	25
Postmortem & Process Improvement Plan	事后总结, 并提出过程改进计划	30	30
合计

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

   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;

  // console.log(map["导师"]);

  // console.log(map["学长"]);

   for(var i=0;i

 

 

 

树的生成：
    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);

 

 

 

 

 

 

7.遇到的代码模块异常或结对困难及解决方法

          之前没有听了解过家族树方面的信息，所以最初听到这个名词的时候，在脑海里是没有一个具体的实物的，这是一个非常抽象的东西。

实现家族树对我来说非常困难，找资料花费了我大量的时间，然后自己模仿着网上的资料，最后做出了一个非常简单的家族树，我能问心无

愧的说我真的尽力了。