2020软件工程第五次作业

这个作业属于那个课程	https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1
这个作业的要求在哪里	https://edu.cnblogs.com/campus/zswxy/software-engineering-2017-1/homework/10619
目标	结对编程实现家族树
作业正文	如下‘
参考文献	CSDN 博客园 百度

GitHob地址：https://github.com/guxing111/20157626-20177680

结对成员：张浩 20177680

                  颜悠 20157626

分工：张浩负责代码编写，归纳总结

           颜悠负责UI设计，素材收集

psp表格

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

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

1）代码组织与内部实现设计

利用jQuery EasyUI 插件实现基础菜单树，构建输入文本信息的文本框，以及点击即生成树的按钮，对文本信息进行切割生成各节点。

2）代码的关键与关键实现部分流程

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

                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 + ")");

 

 

            //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("circle")

                //   .attr("r", 1e-6)

                //   .style("fill", function(d) { return d._children ? "lightsteelblue" : "#357CAE"; });//d 代表数据，也就是与某元素绑定的数据。

                nodeEnter.append("rect")

                    .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://img.mp.sohu.com/upload/20170612/817b54ced4694d61b7fc1b0111c75450_th.png")

 

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

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

                });

            }

附加特点设计与展示

1.设计的创意独到之处

    设计了文本框填写信息界面的文字引导

2.实现思路

    在信息输入部分代码加入文字引导

结果展示：

遇到的问题

问题描述：js语言不熟悉，导致很多语法错误和逻辑错误；文本框和按钮格式别扭

解决方法：百度&知乎&B站&问同学

                  主要是查看各大官网以及学习网站（例如：W3school  jQuery官网等）

是否已解决：已解决

收获：学会了一些html+css+js语言的正确操作

 评价你的队友

值得学习的地方
因为一开始和队友都毫无头绪，就选择分头行动，一起熬夜，差一点点就做出两种版本的树啦哈哈，感谢队友的任劳任怨！
需改进的地方

对于编程还要学很多东西。