使用clay.js繪製一棵圓形樹

心葉發表於2019-01-23
JS

作者：心葉
時間：2019-01-23 17:55

準備環境

我們需要用到的庫有三個：

  1. clay-core：提供核心的clay.js操作；
  2. clay-2d：提供Web端2d圖形繪製介面；
  3. 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方法即可！

相關文章