Arbor.js如何利用webworkers和jQuery创建

这篇文章主要介绍了Arbor.js如何利用webworkers和jQuery创建，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

　　Arbor.js是一个利用webworkers和jQuery创建的数据图形可视化JavaScript框架。它为图形组织和屏幕刷新处理提供了一个高效、力导向布局算法。这个框架并没有强制使用哪一种方法来绘制屏幕，你可以使用Canvas、SVG、甚至是HTML的位置元素。

　　Arbor.js需求

　　由于工作，需要使用一个arbor的js库做点东西，琢磨了一天，终于大致满足了需求。

　　需求一共有四个吧：

　　一、不同的点可以显示相同的文字

　　二、在边上显示文字

　　三、点击node时弹出一个表单

　　四、边上要带箭头

　　可以看到官网上的demo做的还是很不错的，把它的代码download下来，可以看到点和边的定义都在site.js中，这个库是基于jQuery的，所以我写了一个按钮的jQuery的函数，用来测试。

　　首先看了arbor提供的api可以知道动态添加点和边的函数，通过这个加上ajax就可以动态交互了，我们最终的结果是这样的，不过这里只满足上面的需求就好了。

　　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);

　　});

　　添加了这样的代码之后,发现只能添加一个点而且名字是“FSB”，通过浏览器的控制台很容易得到node的数据结果，这里就不说了，,看一下Renderer函数中重写了redraw函数。

感谢你能够认真阅读完这篇文章，希望小编分享的“Arbor.js如何利用webworkers和jQuery创建”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!