作者：心葉
時間：2019-01-23 17:55
準備環境
我們需要用到的庫有三個：
- clay-core：提供核心的clay.js操作；
- clay-2d：提供Web端2d圖形繪製接口；
- clay-chart：提供繪製常用表格的數據計算方法，這裏是tree。
你可以去github上下載最新的發佈版本並引入，或者通過npm install安裝並通過require的方式使用（具體的你可以在github上看到詳細的說明）。
這裏，我們選擇npm管理，然後引入node_modules中的文件：
npm install --save clay-core clay-2d clay-chart這樣，我們就準備好了npm包，接着在html中引入他們：
<script src="../node_modules/clay-core/build/clay-core.js"></script>
<script src="../node_modules/clay-2d/build/clay-2d.js"></script>
<script src="../node_modules/clay-chart/build/clay-chart.js"></script>我們推薦你在實際開發中通過require方式使用，這裏是爲了演示方便。
需要說明
目前，開發環境已經準備好了，因爲繪製樹圖，我們需要模擬數據，你可以在這裏下載數據：
https://github.com/yelloxing/...
我們要繪製一棵圓形樹，一點點顯示，你可以clone最終代碼，查看效果：
git clone https://github.com/yelloxing/eChart.js
cd eChart.js
npm install然後在瀏覽器中打開 ./src/svg.tree.rotate.html 即可查看效果。
計算結點位置
var tree=$chart.tree({
// 目標樹
"type": "circle",
"radius": 300, "cx": 350, "cy": 350,
// 數據結構
"root": initTree => initTree,
"child": parentTree => parentTree.children,
"id": treedata => treedata.name
});第一步，如上面所示，配置樹圖的計算對象，根據原始數據計算每個結點的位置（具體的配置參數，你可以在clay-chart項目的文檔中查看）。
var result=tree(program.data);第二步，使用剛剛獲取的樹圖計算對象，傳遞原始數據，獲取包含了結點位置等信息的結果result。
餘下的就是繪製圖形了。
SVG結點綁定
因爲這裏我們選擇的是svg繪圖，在繪製前，我們可以使用data方法，把數據和g標籤關聯起來，這樣繪圖更容易：
var gs=$$('svg').find('g').data(result.node).enter('g').appendTo('svg');上面就把每個結點的信息掛載到g標籤中，具體的api你可以查看clay-core的文檔。
繪圖
最後，我們來繪圖吧！
gs.loop(function (data, index, target) {
window.setTimeout(function () {
// 在這裏繪製結點和連線條
}, index * 50);
});gs就是和結點掛載起來的g標籤對象，上面的loop方法會在每一個g標籤上啓動傳遞的函數，函數有三個參數，在這裏分別是：
- data：包含位置信息的結點數據
- index：數據序號，也就是是第幾個結點
- target：當前操作的g標籤對象（類似是clay對象）
我們發現，上面二個結點間繪製圖形相差50ms，也就有了動畫效果，下面在裏面添加結點和連線條的繪製方法即可：
// 繪製連線
if (data.pid) {
var pnode = $$('[id=' + data.pid + ']');
$$('<path>')
.css({ "fill": "none", "stroke": "gray" })
.attr('d', bezier(+pnode.attr('left'), +pnode.attr('top'), data.left, data.top))
.appendTo(target)
}根節點沒有父親，不需要繪製連線。這裏繪製連線的方法由clay-2d提供。
// 繪製結點
$$('<circle stroke-width="1" fill="red" r="3">')
.attr('cx', data.left).attr('cy', data.top).css("fill", "#ea779e")
.appendTo(target);至此，就結束了，你可以在這裏查看完整代碼：https://github.com/yelloxing/...
後記
你可以看出來，clay-core提供了繪圖中最基本的操作，比如對結點的增刪改查和基本的計算等；而如果我們需要繪製常見的圖形，比如扇形或這裏的曲線等，由clay-2d提供（後期繪製3d會由clay-3d提供）；而在繪製複雜圖形的時候，比如這裏的tree，我們需要計算每個結點的位置，就由clay-chart提供。
這樣的好處是靈活性高，比如這裏，如果我們想使用canvas2D繪圖，只需要修改繪圖方法爲clay-2d中提供的canvas2D方法即可！