[TOC]
## 概況
### 背景
出于一些原因，我需要構建一個項目組相關的技術趨勢圖。首先也是想到了[ThoughtWorks 技術雷達](https://www.thoughtworks.com/cn/radar)，然而我也發現了技術雷達只會發現一些新出現的技術，以及其對應的一些趨勢。對于現有的技術棧的一些趨勢不夠明顯，接著就只能去構建一個新的技術趨勢圖。
當然首選的框架也是D3.js，似乎會一些更好的工具，但是并不沒有去嘗試。
### Showcase
在線預覽：?[http://phodal.github.io/techstack](http://phodal.github.io/techstack)
最后的效果如下圖:
Screenshot
### D3.js
## 步驟
### Step 1: Schema與原始代碼
最開始的代碼是基于[https://github.com/simonellistonball/techradar](https://github.com/simonellistonball/techradar)這個庫的，但是這其中的數據都是寫好的。而在找到這個庫之前，我也定義好了我的數據應該有的樣子：
~~~
{
"name": "Java",
"important": 5,
"usage": 5,
"current": 4,
"future": 3,
"description": "--------"
}
~~~
對就于每個技術棧都會有名字、重要程度、使用程度、當前級別、未來級別、描述的字段。畢竟技術是有其應該有的趨勢的，如果僅僅只是在上面用一些圖形來表示可能又不夠。
接著，又按照不同的維度區分為language、others、tools、frameworks四個維度
~~~
{
"language": [
{
"name": "Java",
"important": 5,
"usage": 5,
"current": 4,
"future": 3,
"description": "--------"
}
],
"tools": [
{
"name": "Linux",
"important": 3,
"usage": 3,
"current": 3,
"future": 2,
"description": "--------"
}
],
"others": [
{
"name": "Agile",
"important": 3,
"usage": 5,
"current": 3,
"future": 3,
"description": "--------"
}
],
"frameworks": [
{
"name": "Node.js",
"important": 3,
"usage": 5,
"current": 3,
"future": 5,
"description": "--------"
}
]
}
~~~
而在上述的版本中，則有了我想要的箭頭，盡管數據不合適，但是還是可以改的。
### Step 2: 處理數據
然后，我們的主要精力就是在parse上面的數據中，取出每個數據，按照不同的維度去放置技術棧，并進行一些轉換。
~~~
var results = [];
for (var quadrant in data) {
$.each(data[quadrant], function (index, skill) {
results.push({
name: skill.name,
important: skill.important,
usage: skill.usage,
description: skill.description,
trend: entry(quadrant, convertFractions(skill.current), convertFractions(skill.future))
});
})
}
~~~
