パート1。ジャンクション情報
プロジェクト情報
| プロジェクト | アドレス |
|---|---|
| ジョブ | https://edu.cnblogs.com/campus/fzu/2019FZUSEZ/homework/8736 |
| githubのプロジェクト | https://github.com/JiuSiZhang/021700827-071703323.git |
| 学生ID | フルネーム | ブログのアドレス |
|---|---|---|
| 021700827 | Zhangqi栄 | https://www.cnblogs.com/zhangjiusi/ |
| 071703323 | LUゆうフェイ | https://www.cnblogs.com/0717fei/ |
労働者の特定の部門
Zhangqi栄：設計フレームワーク、コード記述された
LUゆう飛：UI設計、造園後半
Part2.PSPテーブル
PSPテーブル
| PSP2.1 | パーソナルソフトウェアプロセス段階 | 推定時間がかかる（時間） | 実際の時間がかかる（時間） |
| プランニング | 計画 | 0.5 | 0.5 |
| 推計 | このタスクが必要とどのくらいの時間を見積もります | 0.5 | 1 |
| 開発 | 開発 | 10 | 9 |
| 分析 | （新しい技術を学ぶ含む）ニーズ分析 | 10 | 12 |
| デザインスペック | 設計ドキュメントの生成 | 0.5 | 0.5 |
| デザインレビュー | デザインレビュー | 0.5 | 1 |
| 標準コーディング | コードの仕様（現在の開発のための適切な規範の開発） | 0.5 | 0.5 |
| 設計 | 具体的な設計 | 1 | 1 |
| コーディング | 具体的なコーディング | 15 | 10 |
| コードレビュー | コードレビュー | 1 | 3 |
| テスト | 検査（セルフテスト、コードを変更し、変更を提出） | 1 | 3 |
| 報告 | レポート | 1 | 1 |
| テストrepor | テストレポート | 1 | 1 |
| サイズ測定 | コンピューティングのワークロード | 0.5 | 0.5 |
| 死後＆プロセス改善計画 | その後まとめ、およびプロセス改善計画 | 0.5 | 0.5 |
| トータル | 43 | 44.5 |
その3。Directory組織、使用のための指示書
説明書
使用するオープン、GitHubのプロジェクトに2.htmlファイルをダウンロードして
強調表示：フォーマットは厳密には、合意により入力、マルチグループの入力の単一のセットせずに、データの各セットの間に空白行を持っている必要があり、空行の終わりを遵守しなければなりません。
ディレクトリ説明
コードは、主にD3を使用する2つの方法があり、D3のフレームワークを使用さ
d3.zipは：（1）ファイルがD3.jsがダウンロード
（2）別のネットワークへの直接リンクを含むことができます。
<script src="http://d3js.org/d3.v3.min.js"></script>有効なネットワーク接続を維持するために使用する場合しかし、それは断線の場合に使用することはできません。
私たちは第二の方法を使用するコードは、これだけ2.htmlをダウンロードし、オープンに使用します
その4。説明と問題解決のアイデアデザインのインプリメンテーションの注意事項
キー（1）のフローチャートの重要な部分を達成するためのアルゴリズム
キーコードデータを読み取る方法にあり、対象フレームに変換を使用することができます。発生する可能性があり、より複雑なケースに関連付けられた複数のツリー、そしてより多くの木は独立して存在するように、ので、いくつかのトラブルの成果なので。まず、独立して形成された抽出ライン、分割キーワード、キーワード接合を押してください。通常の状況下では、データの各セットは、3本の木、ある学術教師ノード層、層程度度を生成しなければなりません。だから、まず、メンター・ノードを抽出し、彼はそれをグラウンド程度にノードを追加し、各程度のため、アイデアは最初の学生のアイデアのいくつかの上に描画、厳格を開始することはないので、学生は、追加され。
（2）キーコードショー
*テキストフィールドの方法でデータを取得します。
<label>师生信息：</label>
<textarea cols="50"rows="10"id="text"></textarea>
<input type="submit" value="确定" name="submit" onclick="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 vi=[];//存出现过的词
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)//dfs递归建对象
{
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;
}*追加アニメーション：ツリーノードに向けて伸ばし、スケーリング
// 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);
}
}第5報。デザインやディスプレイの追加機能
（1）ユニークなデザインの創造性、デザインの感覚
*各ノード充填ヘッド用
*背景画像を追加
（2）アイデアの実現を
D3のライブラリ呼び出しによって、対応するパラメータ情報を設定します
（3）キーコード
*自由にインターフェースの背景を設定します
d3.select("body").style("background-image", "url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571756972&di=bdf0695f47523fcf88d876b50fa53608&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.16pic.com%2F00%2F39%2F66%2F16pic_3966891_b.jpg)");文字ノードの*アバターの充填
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)";（4）結果は
その6。ユニットテスト
ツールを使用してください：モカ
チュートリアル：https://blog.csdn.net/llmys/article/details/82562143これは非常に明確で簡潔な勧告です。
あなたが見ることができます、データ処理テストへの複雑なデータの直接建設
var get_json = require('../get_json.js').get_json;
var expect = require('chai').expect
var str=`导师：张三
2016级博士生：天一、王二、吴五
2015级硕士生：李四、王五、许六
2016级硕士生：刘一、李二、李三
2017级本科生：刘六、琪七、司四
2018级本科生：老张、妃妃
2020级本科生：A、B、C
导师：老张
2025级本科生：a、b、c
2026级博士生：x、y、妃妃
导师：zp
2005级博士生：张三`;
var ans='{"name":"zp","children":[{"name":"2005级博士生","children":[{"name":"张三","children":[{"name":"2016级博士生","children":[{"name":"天一","children":[]},{"name":"王二","children":[]},{"name":"吴五","children":[]}]},{"name":"2015级硕士生","children":[{"name":"李四","children":[]},{"name":"王五","children":[]},{"name":"许六","children":[]}]},{"name":"2016级硕士生","children":[{"name":"刘一","children":[]},{"name":"李二","children":[]},{"name":"李三","children":[]}]},{"name":"2017级本科生","children":[{"name":"刘六","children":[]},{"name":"琪七","children":[]},{"name":"司四","children":[]}]},{"name":"2018级本科生","children":[{"name":"老张","children":[{"name":"2025级本科生","children":[{"name":"a","children":[]},{"name":"b","children":[]},{"name":"c","children":[]}]},{"name":"2026级博士生","children":[{"name":"x","children":[]},{"name":"y","children":[]},{"name":"妃妃","children":[]}]}]},{"name":"妃妃","children":[]}]},{"name":"2020级本科生","children":[{"name":"A","children":[]},{"name":"B","children":[]},{"name":"C","children":[]}]}]}]}]}';
describe('测试数据处理函数', function() {
it('生成的字符串应该等于ans', function() {
expect(get_json()).to.be.equal(ans);
});
});その7。GitHubのコードチェックインの記録
その8。コードモジュールが困難または結び目とソリューションを経験されて
（1）問題の説明
一开始建树有问题，没办法处理复杂的数据情况
无法生成多颗独立存在的树
(2)做过哪些尝试
找人问，找网上代码，看同学发布的博客
(3)是否解决？
第一点解决，数据可以完美生成，第二点未解决，无法生成两颗独立存在的树，一但出现这种情况，除最后一棵树外其他树将无法操作。
(4)收获
学到了d3库的使用方法，js的基本语法和应用，对象的处理，数据格式的转换。
Part9.心得总结
张启荣：
评价一下我的队友
值得学习的地方：谦虚好学，很有责任心，思维严谨而且做的页面很好看。
需要改进的地方：两个人应该多一些沟通与交流。
卢昱妃：
十天速成一门新的语言是一个富有挑战的任务，自己的学习能力还有待提高，这次多亏有代码能力和学习能力都极强的队友全面帮助，才能使得项目推进如此顺利，通过这次结对，从队友身上学到了很多。结对训练完成以后还要继续加强前端的学习。个人觉得两个在结对配合和交流上还是十分顺畅，减少了交流故障造成的时间损耗，以后可以更多一点沟通与交流。