---
# System prepended metadata

title: JS直播班第2組 --- 第7週討論區
tags: [秋季班, 第2組小組討論, JS直播班, 六角學院, '2021']

---

JS直播班第2組 --- 第7週討論區 
===

###### tags: `第2組小組討論` `2021` `JS直播班` `秋季班` `六角學院`



:::success
**小組討論時間：11月21日 週日 晚上 8:00 - 10:00**
:::


## 簽到區

| 組員名稱         | 報到               |
| -------------- | ------------------ |
| Karen Huang    | :heavy_check_mark: |
| Keep           | |
| natsu          | |
| Steve          | |
| ZY Hsu         |:heavy_check_mark: |
| 乃萱            | |
| 有廖先生(Rain)  |:heavy_check_mark:|
| 簡君庭          |  |
| 群嘉           |:heavy_check_mark: |
| 連小艾         |:heavy_check_mark:|



## :dart: 問題

### 第一題：一起討論第七週主線該如何實作！

### 第二題：撈取[2021 前端工程師薪資資料，並用 C3.js 呈現](https://raw.githubusercontent.com/hexschool/2021-ui-frontend-job/master/frontend_data.json?token=AAQWFQDSNRRXC6FBW7PDSETBOESVW)
* 一條長條圖：接案公司的薪資滿意度
* 二條長條圖：抓取博弈、電商公司兩個產業滿意度的平均分數
* 圓餅圖：撈取男性跟女性比例有多少
* 圓餅圖：顯示薪水區間分佈

#### :bulb: 主線任務討論
LV3 在新增卡片的同時，要注意 donut 圖部分，抓取的資料有人遇到一直累加的問題，可以透過賦予空物件的方式，每一次都將圓餅圖抓取的 data 清空，可避免一直累加資料導致圖片破掉的問題。

![](https://i.imgur.com/N3lxR7c.png)


#### :bulb: 小組任務討論
1. 接案公司的薪資滿意度，應該是用長條圖列出滿意度在 10 個不同級距上，各自有多少人數（而不是算平均值）。
2. 博弈要注意有錯字問題：博弈＆博奕，電商亦有一樣的問題：電商與電子商務，以博弈產業來說，可以考慮將這兩個用 if 判斷式都先篩選進同一個類別，算總數，再以陣列長度算出平均。
3. 圓餅圖的部分較好處理。

#### :bulb: C3 CDN 使用注意事項：
在主線及小組任務都要注意 CDN 抓取的版本問題，由於 C3 會使用到 D3 資料處理的功能，同時 C3 也只吃 5.0 版的 D3，萬一用到高於 5.0 版以上，且差太多版，圖表將無法正常顯示，需特別注意。

![](https://i.imgur.com/2OgXXuH.png)

#### :bulb: 小組任務繳交區

> [demo](https://bolaslien.github.io/hexschool-js/week7_teamwork) 跟 [code](https://github.com/BolasLien/hexschool-js/blob/master/week7_teamwork/script.js)
> [name=連小艾]

> [CodePen](https://codepen.io/nainaikuo/pen/zYdXBgg?editors=1010)
> [name=乃萱]

> [CodePen](https://codepen.io/efzdamnp-the-lessful/pen/gOxyRgr)
> [name=群嘉][color=#f72598]

> [CodePen](https://codepen.io/Coding_Snorlax/pen/KKvjEeW)
> [name=Karen Huang][color=#FCE4A8]

> [CodePen](https://codepen.io/zihyin/pen/XWermJK?editors=1011)
> [name=ZY Hsu][color=green]

### :studio_microphone: 本次討論用 SLACK + google meet
![](https://i.imgur.com/QAig87Q.png)
