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

FingerLiu 發布于2019-08-30 15:55 / 1335人閱讀

摘要：需要說明目前，開發環境已經準備好了，因為繪制樹圖，我們需要模擬數據，你可以在這里下載數據我們要繪制一棵圓形樹，一點點顯示，你可以最終代碼，查看效果然后在瀏覽器中打開即可查看效果。余下的就是繪制圖形了。

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

溫馨提示：clay.js已經停止維護，項目遷移到https://github.com/yelloxing/...

準備環境

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

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中引入他們：

我們推薦你在實際開發中通過require方式使用，這里是為了演示方便。

需要說明

目前，開發環境已經準備好了，因為繪制樹圖，我們需要模擬數據，你可以在這里下載數據：

https://github.com/chen351012...

我們要繪制一棵圓形樹，一點點顯示，你可以clone最終代碼，查看效果：

git clone https://github.com/chen351012/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 + "]");
     $$("")
          .css({ "fill": "none", "stroke": "gray" })
          .attr("d", bezier(+pnode.attr("left"), +pnode.attr("top"), data.left, data.top))
          .appendTo(target)
 }

根節點沒有父親，不需要繪制連線。這里繪制連線的方法由clay-2d提供。

// 繪制結點
$$("")
    .attr("cx", data.left).attr("cy", data.top).css("fill", "#ea779e")
    .appendTo(target);

至此，就結束了，你可以在這里查看完整代碼：https://github.com/chen351012...

后記

你可以看出來，clay-core提供了繪圖中最基本的操作，比如對結點的增刪改查和基本的計算等；而如果我們需要繪制常見的圖形，比如扇形或這里的曲線等，由clay-2d提供（后期繪制3d會由clay-3d提供）；而在繪制復雜圖形的時候，比如這里的tree，我們需要計算每個結點的位置，就由clay-chart提供。

這樣的好處是靈活性高，比如這里，如果我們想使用canvas2D繪圖，只需要修改繪圖方法為clay-2d中提供的canvas2D方法即可！

云服務器 GPU云服務器一棵一棵樹用c語言打出一棵樹圓形菜單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117287.html

數據可視化之clay:設計思想和建立初衷

摘要：然而，的設計思想和他們不同，是包容而非競爭。建立目的首先，本項目是為了端數據可視化而建立的，如果用更通俗的話說，就是為了方便使用繪制各種和圖形來反映統計的數據，并且繪制的圖形是可交互的。作者：心葉時間：2018-05-01 19:28 clay項目Github地址：https://github.com/yelloxing/... showImg(https://segmentfaul...

XFLY 2019-08-29 17:20 評論0 收藏0
利用JavaScript在canvas中畫一棵樹

摘要：看到這個網頁中在里繪制一棵樹，感到很有趣，于是仿照他的源代碼，同樣也利用生成了一棵樹。在程序中需要兩個對象。中存放當前正在繪制的這一段樹枝的信息，中存放的是所有的樹枝。對集合內的每個元素依次進行處理這樣我們就完成了在上繪制一棵樹的工作。看到這個網頁中在canvas里繪制一棵樹，感到很有趣，于是仿照他的源代碼，同樣也利用JavaScript生成了一棵樹。在程序中需要兩個對象Branc...

sydMobile 2019-08-19 17:20 評論0 收藏0
CSS的工作過程

摘要：總的來說，過程分以下幾步處理標記并構建樹。不說這些題外話了，我們下面來畫幾個圖，幫助大家更清楚的理解的工作過程。在平時的工作中，可能都是再用一些框架或者是簡單的CSS來修飾我們的HTML頁面，那么仔細想想一個資深的前端從業者，是否需要知道他的工作原理和過程呢，技術這種東西，當然是我們了解的越多，才會使用的越得心應手。那么下面，我就為大家來介紹一下CSS的工作過程把。有個經典的問題：從...

SegmentFault 2019-08-02 16:10 評論0 收藏0
CSS的工作過程

摘要：總的來說，過程分以下幾步處理標記并構建樹。不說這些題外話了，我們下面來畫幾個圖，幫助大家更清楚的理解的工作過程。在平時的工作中，可能都是再用一些框架或者是簡單的CSS來修飾我們的HTML頁面，那么仔細想想一個資深的前端從業者，是否需要知道他的工作原理和過程呢，技術這種東西，當然是我們了解的越多，才會使用的越得心應手。那么下面，我就為大家來介紹一下CSS的工作過程把。有個經典的問題：從...

CarterLi 2019-08-30 15:43 評論0 收藏0