作業 05

程式碼放置位置

Simple baseline 程式碼，請放在 https://github.com/ 你的帳號 /vis2023f/hw05 /src/simple。

---

Medium baseline 程式碼，請放在 https://github.com/ 你的帳號 /vis2023f/hw05 /src/medium。

---

Strong baseline 程式碼，請放在 https://github.com/ 你的帳號 /vis2023f/hw05 /src/strong。

前往你的Demo 網頁

https://t112598018.github.io/vis2023f/hw05/src/simple/

---

https://t112598018.github.io/vis2023f/hw05/src/medium/

---

https://t112598018.github.io/vis2023f/hw05/src/strong/

心得

這次作業在於使用D3.js所提供的視覺化工具Force-directed tree，而如何實作這個Force-directed tree並且運用得當，並且加上許多功能，而在實作過能也遇到一些困難，尤其是在實作展開收縮的功能時，最後用改變數據結構來達到此功能。

成績確認表

總分	完成後打勾	配分	等級	分項描述
		1	Simple baseline	(1)實作Force-directed tree呈現分組情況
		1		(2)使節點可以被拖拉移動
		1		(3)將個人圖片放入節點圓圈中
		1	Medium baseline	(1)滑鼠移動過去顯示該成員相關資訊
		2		(2)滑鼠移動過去放大節點及圖片
		2		(3)點擊節點可以展開或縮放
		2	Strong baseline	利用蘋果成績圖環繞個人照片(小組)

Simple_baseline 範例連結

(1)實作Force-directed tree呈現分組情況	(2)使節點可以被拖拉移動	(3)將個人圖片放入節點圓圈中

Medium_baseline 範例連結

(1)滑鼠移動過去顯示該成員相關資訊	(2)滑鼠移動過去放大節點及圖片	(3)點擊節點可以展開或縮放

Strong_baseline 範例連結

利用蘋果成績圖環繞個人照片(小組)