接合情報、実際の分割
Githubの住所：https://github.com/MokouTyan/Academic_family_web
| 学生ID | ニックネーム | 内容については責任を負い | ブログのアドレス |
|---|---|---|---|
| 131700101 | MO | コード編集、テキスト | https://www.cnblogs.com/mokou/p/11695109.html |
| 031702425 | Yongming | まとめUIデザイン、 | https://www.cnblogs.com/yumesinyo/p/11701527.html |
PSPテーブル
| パーソナルソフトウェアプロセス段階 | 推定時間がかかります | 実際の時間がかかります | |
|---|---|---|---|
| プランニング | 計画 | 0 | 0 |
| 開発 | 開発 | 60 | 500 |
| 分析 | （新しい技術を学ぶために）分析を必要とします | 600 | 1200 |
| デザインスペック | 設計ドキュメントの生成 | 0 | 0 |
| デザインレビュー | デザインレビュー | 60 | 60 |
| 標準コーディング | コードの仕様 | 60 | 60 |
| 設計 | 具体的な設計 | 60 | 60 |
| コーディング | 具体的なコーディング | 180 | 600 |
| コードレビュー | コードレビュー | 180 | 180 |
| テスト | テスト | 180 | 180 |
| 報告 | レポート | 60 | 120 |
| テストrepor | テストレポート | 60 | 120 |
| サイズ測定 | コンピューティングのワークロード | 0 | 0 |
| 死後 | あと知恵 | 180 | 180 |
| プロセス改善計画 | 提案されたプロセス改善計画 | 60 | 60 |
| 推計 | このタスクは、多くの時間を要します | 1740 | 3320 |
実は、私はこの感覚は3と同義である「特定のコーディング」、「コードレビュー」、「特異的に設計された」、「コード仕様」、この形式で曖昧さの多くを考えて、「開発」
この表は、私たちはそれを圧縮することができると思うし、埋めるために非常に非友好的な感じ
問題解決のためのアイデア、設計と実装
メインページショー：
難しさ：
次のトピックを分析することにより、困難を総括
- テキスト入力ボックスの内容を取得する方法
- テキストデータの入力に対処する方法
- どのようにデータ生成学術家系
- どのようにダイナミックにツリー構造
- 同じページ表示で複数のツリーを生成する方法
メンバーの基本的な機能：
MO：基本的な文法はHTML5やCSS、およびJSしかし、接触無しになり
、基本的な文法うHTML5：Yongming。CSSやJS全く接触のために
「学術的な家系図を生成」：
見つけるための検索エンジンの多数の後に第5難しさ、で、
最後に、この問題を解決するためのD3.JS-- JSONデータの可視化を決定。
あなたがこのプラグインをマスターしたい時間のような短い期間で実現週末の研究、の一日を過ごした後は、あまりにも時間がかかり、
10日に完成したいゼロベースのプロジェクトは容易ではありません！
最後に、私は、そこに前任者がこの問題について考えているかどうかを見つけるために、Baiduのに持っていました
検索とフィルタリング、そして最後に見つかった1例たくさんした後、それは私たちに満足感を与えることです。
、スパニングツリーの動的な効果は、私たちの満足にあるが、この木の結果のデータは、我々が望むものではなく、固定され
入力要件に応じて変化させることがない、我々はデータを変更する方法を学ばなければなりません
前のコードを読んだ後、D3.JSのためだけでなく、より深い理解を持って、
そして、文法やJSON JSの構図の新しい理解は、〜しかし、長い時間を費やしたが、多くのことを学びました
「テキスト入力を取得します」：
最初のポイントの問題では、「どのように入力したテキストボックスにテキストを取得するには」
これは、私たちがこの問題を解決するために使用され、解決するために非常に良いですjquery.js
テキスト入力は変数に格納されています
「入力されたテキストを処理」：
我々は問題の解決策、とあてもなく事前に簡単な検索の多数を検索すると、
JSのこの部分は、私たちだけ全く新しい知識のためであるので、それは問題の検索にキーワードものを使用することは困難です、
そしてまた、そのコードを完璧に、他の人のコードの多くを参照して、このプロセスは非常に痛いです！
だから我々は、2番目の質問の完了時に苦味をたくさん食べて、
スパニングツリーは、独自のローカル・データ・フォーマットを使用することであるため、
我々は唯一のツリーからのスタイルを変更することができますので、私たちは、ツリー内のデータのデータ形式をインポートしたいものをフォローすることはできません
JSONデータに類似した構造が、我々はすべて、これはJSON形式ではないことを知っています、
彼}、[]、純粋に偶発的であるJSON形式とすることができるようなキーワード検索と同様に、アレイ{。
最後に（）は、この問題を解決するためにこぼれのJSの関数である私達の方法のために最も適したを見つけるために、データで見つかりました、
配列に一つ一つが私たちのデータにデータを取得し、最終的には他の側を取得するためにプッシュ（）メソッドを使用する方法と同様に与えられます
同じ名前のデータをマージする方法、これは新しい問題を作成し、それは同じ名前の経験データであり、
それが最初の配列内のすべてのデータ・オブジェクトのオブジェクトを横断しなければならない、オブジェクトの配列、
彼らは見つけるために、キーワードかわからないので、私は、見つかっていない知識のこの部分
だから我々は、第一層の第一のデータの最初のデータから引き出さ
つまり、「学部」、「マスター」、「医師」や「メンター - 度 - グレード - 名」
「 - 名前グレード - メンター - 学位」この木は、この構造が、それよりもはるかに鮮明になります
何のJSブール値が存在しないので、だから我々は、sign1,2,3をマークし3度に名前を付けます、
データは、データに同じ名前を存在している場合は、同時に私たちは、データをトラバースする方法を得ることはありません、
だから我々は、3度が既に存在するかどうかを表すために3ビットを使用している場合
フラグがtrueの場合、オブジェクトの配列の確立に大きな程度がメンターを配置し、学生の成績と、オブジェクトのアレイ度に一つずつ、
フラグが偽であり、生徒の成績は、既存の程度の配列にオブジェクトをする場合は、冗長データは、複数度のアレイを生成解きます。
「複数のツリーを持つページを表示します」：
最後に、考える、私たちは長い間考えてみましょうこと「を表示するには、同じページに複数のツリーを生成する方法」であります
最初のデータコンテンツを処理した後、すなわち、別のツリーを取得、ページを表示するための新しいDIVセクションを生成
Jquery.jsは当初、新しいブロック、新しいツリー内のブロックを生成したいです
関連する情報のみを急いであきらめ見つけることができないので、しかし、これはの10日間を作るために最善の努力であります
JSの知識と私たちはコテージを入力フロントエンドの多くは、訓練の結び目は、我々は、JSの多くの構文に精通しています
そして、我々は、プロセスが難しいですが、F12コンソールの使用をマスターしますが、そんなに内容を学び、かなり幸せでした
設計と表示
メインページのコンテンツ：
コードを学ぶためのリファレンスは、ここに示されている私たち自身のコードの内容を書くことで、下記のリンクに配置されます
最初は本体に接合されています
<div id="textbody" style="position: fixed;top: 10px;right: 10px;z-index: 9999;padding:5px;">
<textarea placeholder="在这里写入如下内容：
导师：张三
2016级博士生：天一、王二、吴五
2015级硕士生：李四、王五、许六
2016级硕士生：刘一、李二、李三
2017级本科生：刘六、琪七、司四
...
然后点击“生成学术家族树”按钮
可通过鼠标拖动、滚轮进行缩放展示
↓快按下这个按钮试试吧(`・ω・´)！！↓" required></textarea>
<div><button id='begin' style="width:500px;">生成学术家族树</button></div>
</div>
<div style="position: fixed;right: 10px;bottom:10px;z-index: 9999;padding:5px;text-shadow:2px 2px 0px #fff;font-size: 24pt;">Made by     莫多、 永铭<br>Last upload 2019.10.18</div>開始するシンボルとして、呼び出す関数を定義します
データ処理：
、以下のスクリプトでのjQueryのビットの使用に参加
$("#begin").click(function() {
let text = document.getElementsByTagName('textarea')[0].value
let line1 = text.split(/[(\r\n)\r\n]+/) // 根据回车分割
if (line1.length == 1) {
line1 = ['导师：张三', '2016级博士生：天一、王二、吴五', '2015级硕士生：李四、王五、许六', '2016级硕士生：刘一、李二、李三', '2017级本科生：刘六、琪七、司四']
}
let teacher = line1[0].split('：')
let sign1 = 1
let sign2 = 1
let sign3 = 1
let teacherObj = {
name: '',
children: []
} // {老师:{本科生:{2017:学生}}}
let studentObjList = [] // {2017:学生}
let gradeObjList = [] // {本科生:{2017:学生}}
let boshishengObjList = []
let benkeshengObjList = []
let shuoshishengObjList = []
//////
for (let i = 1; i < line1.length; i++) {
let student = line1[i].split('：') //得到学生的名单
let degree = student[0].split('级')[1]
let grade = student[0].split('级')[0]
let students = student[1].split('、')
// 封装，将学生包含到年级里
studentObjList = []
////
for (let i = 0; i < students.length; i++) {
let obj = {}
obj.name = students[i]
studentObjList.push(obj)
}
////
gradeObjList = []
gradeObjList.name = grade + '级'
gradeObjList.children = studentObjList
//teacherObj.children.push(gradeObjList) // 插入其他年级及届数
if (degree === '博士生') {
if (sign1) {
boshishengObjList = []
boshishengObjList.name = '博士生'
boshishengObjList.children = gradeObjList
boshishengObjList.children.push(gradeObjList)
teacherObj.children.push(boshishengObjList)
sign1 = 0
} else {
boshishengObjList.children.push(gradeObjList)
}
} else if (degree === '本科生') {
if (sign2) {
benkeshengObjList = []
benkeshengObjList.name = '本科生'
benkeshengObjList.children = gradeObjList
benkeshengObjList.children.push(gradeObjList)
teacherObj.children.push(benkeshengObjList)
sign2 = 0
} else {
benkeshengObjList.children.push(gradeObjList)
}
} else if (degree === '硕士生') {
if (sign3) {
shuoshishengObjList = []
shuoshishengObjList.name = '硕士生'
shuoshishengObjList.children = gradeObjList
shuoshishengObjList.children.push(gradeObjList)
teacherObj.children.push(shuoshishengObjList)
sign3 = 0;
} else {
shuoshishengObjList.children.push(gradeObjList)
}
}
}
//////
teacherObj.name = teacher[1]
console.log(line1)
treeData = [] //把数据置为空
treeData.push(teacherObj) //放入数据
root = treeData[0]
update(root) //调用D3.JS
});このセクションでは、のためにデータを処理するために使用されます
console.log（）構文は、コンソールに表示するのは簡単です
スタイリング：
<style>
.node {
cursor: pointer
}
.node circle {
fill: #357cae;
stroke: #4682b4;
stroke-width: 3px
}
.node circle:hover {
transform: scale(1.1)
}
.node rect {
transition: all .5s;
fill: #2990ca;
stroke: #4682b4;
stroke-width: 1.5px
}
.node rect:hover {
transform: scale(1.1)
}
.node text {
font: 20px sans-serif
}
.node text:hover {
font-weight: 700;
transform: scale(1.05)
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 4px
}
.link:hover {
transition: all .5s;
stroke: #4d4d4d
}
body {
display: block;
margin: 8px;
background-image: url(src/background.jpg);
background-position: bottom 0;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover
}
html {
overflow-x: hidden;
overflow-y: hidden
}
</style>使用するディレクトリ組織、指示
ディレクトリ説明：
私たちは、JS、CSS、フォント、srcフォルダ内のすべてのリソースを置きます
使用手順：
リソースをダウンロードした後、使用するindex.htmlファイルを開きます
他のフォルダは、それらの間であることを確認するために、参照がローカル相対パスです
ユニットテスト
テストツール：
私たちは、F12をテストするために、Chromeブラウザのツールを設定し、使用しています
ここで私は、チュートリアルを見てお勧めします。https://www.cnblogs.com/xiaowenshu/p/10450848.html
テストコード：
CONSOLE.LOGは、データ分割の正確さをチェックするためのコード（）コマンドで使用しました
初期のテストで、我々は最終的に知っていないので、右命令
このツールを使用すると、私たちは本当に進歩の多くを加速します
これは、この実験の最大の収穫の一部であり、クロムコンソールの使い方をマスター
テストのアイデア：
最大の欠点は、私たちは本当に能力が限られているため、我々は、複数のツリーを生成することができないということです
第二は、同じ名前の存在の問題で、最高の学位を得ることができませんでした
私たちの文法は二回一緒にマージすることはできません同じ学年を入力している致命的な欠陥を持っています
テストデータは、すべての場所が混雑している、あまりにもにつながります
だから我々は、ズーム機能が見やすいスケーリングされ使用します
これが私たちの欠点である、通常の入力テストは問題ありません
異常または双晶困難とソリューション
問題の説明：
このセクションでは、このページ、「問題解決のアイデアを、設計と実装」を参照してください。
何をしようとしました：
私はvue.jsとd3.jsを結合しようとした、とjQueryを組み合わせてみてください
新しいに新しい家族木学習ブロックを生成する、新しいブロックを生成します
それは解決されます。
Vue.jsはd3.jsと組み合わせて、しかし最終的には失敗に終わりました
jQueryを使って組み合わせることが、組み合わせが非常に近接していない、jqueryのは、唯一のロールコールを果たしました
何の収穫：
知識の私達のレベルは、もはやHTML5とCSSに限定されるように、JSの詳細の多くを知らないために、
クローム特定の操作コンソール
ペア感、評価チームメイト
MOの経験：
私はいつもそれが設計人々の比較的強い感覚、完成したコードに弱い人であることを、作業がよりフロントエンドとなり過小評価するために使用しました
私はHTML5とCSSを連絡する前に、より多くのフロントエンド言語は、マークアップ言語ではなく、いくつかの豊かな論理コードで使用されているので
しかし、仕事の後、このペアの後、私は学習、フロントエンドの新しい理解を持って、同じ学習のフロントエンドは、学習の多くを必要と！
Yongming経験：
仕事上の結び目から、私は道の自習方法、重要性と効率性を感じました
自身が以前に我々は時間のような短い期間で自習たくさんのことを必要とする状況に遭遇していませんでした
だから、自己学習プロセスのこの時点では、多くの側面が失敗している、それは絶対に非準拠であります
私にとって、これは間違いなく仕事で成功していない、それは上忙しく、この仕事には役立ちませんでした
改善のためのエリア：
以下、長い時間のために考えることが、自分のアイデアを表現するのが良いコミュニケーションが得意ではないが、解決策やアドバイスを提案しようとすることができるMO
その後、すべての面でYongmingの基礎は、それはそれに固執することができていても、自習相を支払うために必要な労力と時間で他のものよりも弱いですが、効率が高くありませんが、多くの場合、タスクは最後の瞬間になり押すと
参考リンク
