[TOC]
## 概況
### 背景
在開始設計新的技能樹——[Sherlock](https://github.com/phodal/sherlock)的同時，結合一下原有的技能樹，說說如何去設計，新的技能樹還很丑。
### Showcase
代碼見：?[https://github.com/phodal/sherlock](https://github.com/phodal/sherlock)
Sherlock
### Graphviz
> Graphviz （英文：Graph Visualization Software的縮寫）是一個由AT&T實驗室啟動的開源工具包，用于繪制DOT語言腳本描述的圖形。它也提供了供其它軟件使用的庫。Graphviz是一個自由軟件，其授權為Eclipse Public License。其Mac版本曾經獲得2004年的蘋果設計獎。
一個簡單的示例代碼如下:
~~~
graph example1 {
Server1 -- Server2
Server2 -- Server3
Server3 -- Server1
}
~~~
執行編譯后:
~~~
dot -Tjpg lz.dot -o lz.jpg
~~~
就會生成下面的圖片
lz
接著我們便可以建立一個簡單的模型來構建我們的技能樹。
## 步驟
### Step 1: 打造簡單的技能樹
先以JavaScript全棧作一個簡單的示例，他們可能存在下面的依賴關系:
* “JavaScript” -> “Web前端”
* “HTML” -> “Web前端”
* “CSS” -> “Web前端”
* “Web前端” -> “Web開發”
* “JavaScript” -> “Node.js” -> “Web服務端”
* “SQL/NoSQL” -> “Web服務端”
* “Web Server-Side” -> “Web開發”
即Web前端依賴于JavaScript、HTML、CSS，而Node.js依賴于JavaScript，當然我們也需要數據的支持，大部分的網站都是數據驅動型的開發。而構成完成的開發鏈的則是前端 + 服務端。
于是我們有了這張圖:
Tree
而我們的代碼是這樣的:
~~~
digraph tree
{
nodesep=0.5;
charset="UTF-8";
rankdir=LR;
fixedsize=true;
node [style="rounded,filled", width=0, height=0, shape=box, fillcolor="#E5E5E5", concentrate=true]
"JavaScript" ->"Web前端"
"HTML" -> "Web前端"
"CSS" -> "Web前端"
"Web前端" -> "Web開發"
"JavaScript" -> "Node.js" -> "Web服務端"
"SQL/NoSQL" -> "Web服務端"
"Web服務端" -> "Web開發"
}
~~~
上面舉出的是一個簡單的例子，對應的我們可以做一些更有意思的東西，比如將dot放到Web上，詳情見下一篇。
### Step 3: D3.js Tooltipster
使用D3.js與Darge-d3構建一個簡單的技能樹的時候，需要一個簡單的類似于小貼士的插件。
Tooltips
#### Tooltipster
Tooltipster是一個jQuery tooltip 插件，兼容Mozilla Firefox, Google Chrome, IE8+。
簡單示例`html`:
~~~
<section class="container tooltip" title="Parent container">
<a href="http://google.com" class="tooltip" title="Get your Google on">Google</a>
</section>
~~~
簡單示例``js`:
~~~
$(document).ready(function() {
$('.tooltip').tooltipster();
});
~~~
D3.js、Tooltipster與Requirejs的配置如下所示:
~~~
require.config({
baseUrl: 'app',
paths: {
jquery: 'lib/jquery-2.1.3',
d3: 'lib/d3.min',
text: 'lib/text',
'jquery.tooltipster': 'lib/jquery.tooltipster.min'
},
'shim': {
'jquery.tooltipster': {
deps: ['jquery']
}
}
});
~~~
#### 整合代碼
最后代碼如下所示:
~~~
inner.selectAll('g.node')
.each(function (v, id) {
g.node(v).books = Utils.handleEmptyDocs(g.node(v).books);
g.node(v).links = Utils.handleEmptyDocs(g.node(v).links);
var data = {
id: id,
name: v,
description: g.node(v).description,
books: g.node(v).books,
links: g.node(v).links
};
var results = lettuce.Template.tmpl(description_template, data);
$(this).tooltipster({
content: $(results),
contentAsHTML: true,
position: 'left',
animation: 'grow',
interactive: true});
$(this).find('rect').css('fill', '#ecf0f1');
});
~~~
