成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用clay.js繪制一棵圓形樹(shù)

FingerLiu / 1346人閱讀

摘要：需要說(shuō)明目前，開(kāi)發(fā)環(huán)境已經(jīng)準(zhǔn)備好了，因?yàn)槔L制樹(shù)圖，我們需要模擬數(shù)據(jù)，你可以在這里下載數(shù)據(jù)我們要繪制一棵圓形樹(shù)，一點(diǎn)點(diǎn)顯示，你可以最終代碼，查看效果然后在瀏覽器中打開(kāi)即可查看效果。余下的就是繪制圖形了。

作者：心葉
時(shí)間：2019-01-23 17:55

溫馨提示：clay.js已經(jīng)停止維護(hù)，項(xiàng)目遷移到https://github.com/yelloxing/...
準(zhǔn)備環(huán)境

我們需要用到的庫(kù)有三個(gè)：

clay-core：提供核心的clay.js操作；

clay-2d：提供Web端2d圖形繪制接口；

clay-chart：提供繪制常用表格的數(shù)據(jù)計(jì)算方法，這里是tree。

你可以去github上下載最新的發(fā)布版本并引入，或者通過(guò)npm install安裝并通過(guò)require的方式使用（具體的你可以在github上看到詳細(xì)的說(shuō)明）。

這里，我們選擇npm管理，然后引入node_modules中的文件：

npm install --save clay-core clay-2d clay-chart

這樣，我們就準(zhǔn)備好了npm包，接著在html中引入他們：

我們推薦你在實(shí)際開(kāi)發(fā)中通過(guò)require方式使用，這里是為了演示方便。

需要說(shuō)明

目前，開(kāi)發(fā)環(huán)境已經(jīng)準(zhǔn)備好了，因?yàn)槔L制樹(shù)圖，我們需要模擬數(shù)據(jù)，你可以在這里下載數(shù)據(jù)：

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

我們要繪制一棵圓形樹(shù)，一點(diǎn)點(diǎn)顯示，你可以clone最終代碼，查看效果：

git clone https://github.com/chen351012/eChart.js

cd eChart.js

npm install

然后在瀏覽器中打開(kāi) ./src/svg.tree.rotate.html 即可查看效果。

計(jì)算結(jié)點(diǎn)位置 
var tree=$chart.tree({
   // 目標(biāo)樹(shù)
   "type": "circle",
   "radius": 300, "cx": 350, "cy": 350,
   // 數(shù)據(jù)結(jié)構(gòu)
   "root": initTree => initTree,
   "child": parentTree => parentTree.children,
   "id": treedata => treedata.name
   });

第一步，如上面所示，配置樹(shù)圖的計(jì)算對(duì)象，根據(jù)原始數(shù)據(jù)計(jì)算每個(gè)結(jié)點(diǎn)的位置（具體的配置參數(shù)，你可以在clay-chart項(xiàng)目的文檔中查看）。

var result=tree(program.data);

第二步，使用剛剛獲取的樹(shù)圖計(jì)算對(duì)象，傳遞原始數(shù)據(jù)，獲取包含了結(jié)點(diǎn)位置等信息的結(jié)果result。

余下的就是繪制圖形了。

SVG結(jié)點(diǎn)綁定

因?yàn)檫@里我們選擇的是svg繪圖，在繪制前，我們可以使用data方法，把數(shù)據(jù)和g標(biāo)簽關(guān)聯(lián)起來(lái)，這樣繪圖更容易：

var gs=$$("svg").find("g").data(result.node).enter("g").appendTo("svg");

上面就把每個(gè)結(jié)點(diǎn)的信息掛載到g標(biāo)簽中，具體的api你可以查看clay-core的文檔。

繪圖

最后，我們來(lái)繪圖吧！

gs.loop(function (data, index, target) {
    window.setTimeout(function () {
                    
    // 在這里繪制結(jié)點(diǎn)和連線條
     
    }, index * 50);
});

gs就是和結(jié)點(diǎn)掛載起來(lái)的g標(biāo)簽對(duì)象，上面的loop方法會(huì)在每一個(gè)g標(biāo)簽上啟動(dòng)傳遞的函數(shù)，函數(shù)有三個(gè)參數(shù)，在這里分別是：

data：包含位置信息的結(jié)點(diǎn)數(shù)據(jù)

index：數(shù)據(jù)序號(hào)，也就是是第幾個(gè)結(jié)點(diǎn)

target：當(dāng)前操作的g標(biāo)簽對(duì)象（類似是clay對(duì)象）

我們發(fā)現(xiàn)，上面二個(gè)結(jié)點(diǎn)間繪制圖形相差50ms，也就有了動(dòng)畫(huà)效果，下面在里面添加結(jié)點(diǎn)和連線條的繪制方法即可：

// 繪制連線
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)
 }

根節(jié)點(diǎn)沒(méi)有父親，不需要繪制連線。這里繪制連線的方法由clay-2d提供。

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

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

后記

你可以看出來(lái)，clay-core提供了繪圖中最基本的操作，比如對(duì)結(jié)點(diǎn)的增刪改查和基本的計(jì)算等；而如果我們需要繪制常見(jiàn)的圖形，比如扇形或這里的曲線等，由clay-2d提供（后期繪制3d會(huì)由clay-3d提供）；而在繪制復(fù)雜圖形的時(shí)候，比如這里的tree，我們需要計(jì)算每個(gè)結(jié)點(diǎn)的位置，就由clay-chart提供。

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117287.html

相關(guān)文章

  • 數(shù)據(jù)可視化之clay:設(shè)計(jì)思想和建立初衷

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

    XFLY 評(píng)論0 收藏0

  • 利用JavaScript在canvas中畫(huà)一棵樹(shù)

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

    sydMobile 評(píng)論0 收藏0

  • CSS的工作過(guò)程

    摘要：總的來(lái)說(shuō)，過(guò)程分以下幾步處理標(biāo)記并構(gòu)建樹(shù)。不說(shuō)這些題外話了，我們下面來(lái)畫(huà)幾個(gè)圖，幫助大家更清楚的理解的工作過(guò)程。 在平時(shí)的工作中，可能都是再用一些框架或者是簡(jiǎn)單的CSS來(lái)修飾我們的HTML頁(yè)面，那么仔細(xì)想想一個(gè)資深的前端從業(yè)者，是否需要知道他的工作原理和過(guò)程呢，技術(shù)這種東西，當(dāng)然是我們了解的越多，才會(huì)使用的越得心應(yīng)手。那么下面，我就為大家來(lái)介紹一下CSS的工作過(guò)程把。有個(gè)經(jīng)典的問(wèn)題：從...

    SegmentFault 評(píng)論0 收藏0

  • CSS的工作過(guò)程

    摘要：總的來(lái)說(shuō)，過(guò)程分以下幾步處理標(biāo)記并構(gòu)建樹(shù)。不說(shuō)這些題外話了，我們下面來(lái)畫(huà)幾個(gè)圖，幫助大家更清楚的理解的工作過(guò)程。 在平時(shí)的工作中，可能都是再用一些框架或者是簡(jiǎn)單的CSS來(lái)修飾我們的HTML頁(yè)面，那么仔細(xì)想想一個(gè)資深的前端從業(yè)者，是否需要知道他的工作原理和過(guò)程呢，技術(shù)這種東西，當(dāng)然是我們了解的越多，才會(huì)使用的越得心應(yīng)手。那么下面，我就為大家來(lái)介紹一下CSS的工作過(guò)程把。有個(gè)經(jīng)典的問(wèn)題：從...

    CarterLi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<