この作品のブログへのリンク：
https://www.cnblogs.com/Pr0Sk1er/
ペアの学生のブログのアドレス：
https://www.cnblogs.com/031702318fzu/
ジョブ倉庫住所：
https://github.com/licheng1997/031702318-031602329
分業の作品：
031 602 329寶蓮鄭：コードを書きます。
031 702 318リーチェン：テスト、後続の更新
PSPテーブル：
| PSP2.1 | パーソナルソフトウェアプロセス段階 | 推定時間がかかる（分） |
|---|---|---|
| 計画プログラム | 0 | 0 |
| タスクが必要であると推定されているどのくらいの時間を見積もります | 600 | 900 |
| 開発開発 | 240 | 300 |
| 分析は、（新しい技術を学ぶ含む）の分析を必要とします | 300 | 360 |
| 設計仕様は、設計ドキュメントを生成します | 0 | 0 |
| デザインレビューデザインレビュー | 60 | 70 |
| （現在の開発のための適切な仕様を開発するために）標準コード仕様コード | 120 | 120 |
| デザイン具体的な設計 | 60 | 60 |
| 具体的なコーディングコーディング | 240 | 270 |
| コードレビューコードレビュー | 60 | 60 |
| 試験試験（セルフテスト、コードを変更し、変更を提出） | 30 | 20 |
| 報告レポート | 60 | 60 |
| テストReporテストレポート | 0 | 0 |
| サイズ計測計算の労力 | 30 | 30 |
| 死後＆プロセス改善計画の後知恵、およびプロセスの改善案を提案します | 30 | 40 |
| トータル | 1830 | 2290 |
問題解決のためのアイデアの記述と説明の設計と実装：
1、アイデア。ビューの運用要件からは、最初に行うことは指導者、子ノードとして以前の学生として、ルートノードを持つツリーです。これを実現するスクリプトを見つけるために、インターネットによって達成されます。
次のように2、
：HTMLコンテナを
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>师门树</title>
<style>
::-webkit-scrollbar {
display: none;
}
html,
body {
overflow: scroll;
margin: 0;
}
#input{
width: 400px;
min-height: 100px;
}
</style>
</head>
<body>
<textarea id="input">
导师：张三
2016级博士生：天一、王二、吴五
2015级硕士生：李四、王五、许六
2016级硕士生：刘一、李二、李三
2017级本科生：刘六、琪七、司四
导师：李久
2016级博士生：天一、王二、吴五
2015级硕士生：李四、王五、许六
2016级硕士生：刘一、李二、李三
2017级本科生：刘六、琪七、司四
</textarea>
<button id="generate">生成</button>
<div id="nodes"></div>
<script>
/*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body
.clientHeight;
</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.hierarchy-0.5.0/build/hierarchy.js"></script>
<script type="" src="index.js"></script>
</body>
</html>
JS：
const btn = document.getElementById('generate')
btn.onclick = () => {
const textarea = document.getElementById('input')
const input = textarea.value.trim()
const labs = input.split('\n\n')
console.log(labs)
const data = []
for (const lab of labs) {
const lines = lab.trim().split('\n')
const mentorRegex = /导师：(.+)/
const mentor = lines[0].match(mentorRegex)[1]
const labData = {
id: mentor,
children: []
}
const tmp = {}
for (let line of lines) {
line = line.trim()
if (line.includes('导师')) {
continue
}
const kv = line.split('：')
const key = kv[0]
const students = kv[1].split('、')
for (let i in students) {
students[i] = {
id: students[i]
}
}
const year = key.match(/[0-9]+/)[0]
const type = key.split('级')[1]
if (tmp[year] === undefined) {
tmp[year] = {}
}
tmp[year][type] = students
}
for (const key of Object.keys(tmp)) {
const yearStds = tmp[key]
console.log(yearStds)
const types = ['本科生', '硕士生', '博士生'] /* 设置学生类型 */
const yearChildren = []
types.forEach(type => {
console.log(yearStds[type])
console.log(type)
if (yearStds[type] !== undefined) {
console.log(1)
yearChildren.push({
id: type,
children: yearStds[type]
})
}
})
console.log(yearChildren)
const yearData = {
id: key,
children: yearChildren
}
labData.children.push(yearData)
}
data.push(labData)
console.log(labData)
}
for (const item of data) {
const ele = document.createElement('div')
ele.id = item.id
document.getElementById('nodes').appendChild(ele)
generateGraph(ele.id, item)
}
document.getElementsByTagName('body').height = labs.length * 500 + 1000
}
const generateGraph = (container, data) => {
var graph = new G6.TreeGraph({
container: container,
width: 800,
height: 500,
pixelRatio: 2,
modes: {
default: [{
type: "collapse-expand",
onChange: function onChange(item, collapsed) {
var data = item.get("model").data;
data.collapsed = collapsed;
return true;
}
}
]
},
defaultNode: {
size: 16,
anchorPoints: [
[0, 0.5],
[1, 0.5]
],
style: {
fill: "#40a9ff",
stroke: "#096dd9"
}
},
defaultEdge: {
shape: "cubic-horizontal",
style: {
stroke: "#A3B1BF"
}
},
layout: {
type: "compactBox",
direction: "LR",
getId: function getId(d) {
return d.id;
},
getHeight: function getHeight() {
return 16;
},
getWidth: function getWidth() {
return 16;
},
getVGap: function getVGap() {
return 10;
},
getHGap: function getHGap() {
return 100;
}
}
});
graph.node(function (node) {
return {
size: 26,
style: {
fill: "#40a9ff",
stroke: "#096dd9"
},
label: node.id,
labelCfg: {
position: node.children && node.children.length > 0 ? "left" : "right"
}
};
});
graph.data(data);
graph.render();
graph.fitView();
}デザインやディスプレイの追加機能
いいえ。さらにそれを再び増加し、他のフォローアップ調査。
カタログの説明と使用のための指示書
1、ファイルのディレクトリ以下に示すように：
2、使用：
htmlファイルを開くには、次の図に見ることができます：
デフォルトのテストサンプルを持っているボックスで、ユーザーは一例フォーマットに従って変更を行い、その後、あなたが生成されたスパニングツリーを見ることができるスパニングツリー何かを試してみたいです
図3に示すように、スパニングツリーの効果は以下の通り：
ユニットテスト
使用ユニットテストGoogleのブラウザ
Githubのチェックコードが記録さ
コードモジュールは困難または結び目とソリューションを経験されて
最大の問題は、（学部生、大学院生、博士課程）インデントエラーが発生した生徒と同じタイプです。
解像度：JS機能の変化だけでは、全体の問題は、現在理解されていません。Bステーションは、学校のJSのままです。
それはまだ解決されていません。
私は助けるために手を貸すために喜んで兄を持っていると思います。
チームメイトの評価：
Pr0Sk1er気持ち：非常に難しい、非常に難しい、難しいです。0から本当にそうであっても、時間を費やし、毛皮を学ぶために、理解していない多くの人々が残っています。長い道のり。
彼のチームメイトの評価：非常に難しいです。私たちのすべては、フロントエンドの仕事との接触を持っていた前に、彼は明らかに、仕事を経験した私たちは多くのことを学んだと感じました。