Arbor.js如何利用webworkers和jQuery創(chuàng)建

這篇文章主要介紹了Arbor.js如何利用webworkers和jQuery創(chuàng)建，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　Arbor.js是一個利用webworkers和jQuery創(chuàng)建的數(shù)據(jù)圖形可視化JavaScript框架。它為圖形組織和屏幕刷新處理提供了一個高效、力導(dǎo)向布局算法。這個框架并沒有強制使用哪一種方法來繪制屏幕，你可以使用Canvas、SVG、甚至是HTML的位置元素。

　　Arbor.js需求

　　由于工作，需要使用一個arbor的js庫做點東西，琢磨了一天，終于大致滿足了需求。

　　需求一共有四個吧：

　　一、不同的點可以顯示相同的文字

　　二、在邊上顯示文字

　　三、點擊node時彈出一個表單

　　四、邊上要帶箭頭

　　可以看到官網(wǎng)上的demo做的還是很不錯的，把它的代碼download下來，可以看到點和邊的定義都在site.js中，這個庫是基于jQuery的，所以我寫了一個按鈕的jQuery的函數(shù)，用來測試。

　　首先看了arbor提供的api可以知道動態(tài)添加點和邊的函數(shù)，通過這個加上ajax就可以動態(tài)交互了，我們最終的結(jié)果是這樣的，不過這里只滿足上面的需求就好了。

　　Arbor.js代碼

　　$("Button").click(function(){

　　//alert("nihao");

　　varnn=sys.addNode("FSB",{label:'nihao',color:CLR.branch,shape:"dot",alpha:1,expanded:true});

　　varnm=sys.addNode("FSB",{label:'sad',color:CLR.branch,shape:"dot",alpha:1});

　　varee=sys.addEdge(nm,nn,{label:"nihao"});

　　//varnodes=sys.getEdges(nm,nn);

　　//nodes[0].data.label="nihaoasfsa";

　　alert(""+nodes[0].data.label);

　　});

　　添加了這樣的代碼之后,發(fā)現(xiàn)只能添加一個點而且名字是“FSB”，通過瀏覽器的控制臺很容易得到node的數(shù)據(jù)結(jié)果，這里就不說了，,看一下Renderer函數(shù)中重寫了redraw函數(shù)。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Arbor.js如何利用webworkers和jQuery創(chuàng)建”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!