![xRelation by RGraph2](https://raw.github.com/hafeyang/rgraph2/master/xrelation.png)
##RGraph2
RGraph是一个基于[Raphaeljs](http://raphaeljs.com/)完整的点->线图的web实现。
online demo :[RGraph2 Demo](http://hafeyang.github.com/rgraph2/)
github地址 :
git clone https://github.com/hafeyang/rgraph2.git
RGraph2已经支持[bower](http://twitter.github.com/bower/)包规范,可以直接使用`bower`安装
bower install rgraph2
由于[Raphaeljs](http://raphaeljs.com/)目前不支持`bower`规范,所以没有引入`Raphaeljs`依赖
RGraph包含特性:
* 点->线图布局算法(2.0新增)
* 基本画布拖拽
* 点拖动,鼠标hover高亮相关点
* 支持放大/缩小/鼠标滚轮事件
* 提供API增/删/改节点
##Quick Demo
<script type="text/javascript" src="https://raw.github.com/hafeyang/rgraph2/master/lib/raphael-min.js"></script>
<script type="text/javascript" src="https://raw.github.com/hafeyang/rgraph2/master/lib/rgraph2.js"></script>
<script type="text/javascript">
var graph = new RGraph("canvas");
//加载数据
graph.loadData({
nodes:{
//label:显示文字,支持Raphael.fullfill格式。
//rectStyle,textStyle 文本框的颜色,文字颜色
"1":{"label":"{name}",name:"节点1",rectStyle:{fill:"#616130",stroke:"#616130"},textStyle:{fill:"#fff"}},
"2":{"label":"节点2"}
},
edges:[
//source,target 是节点的ID ,箭头由source->target
//arrowStyle,指定箭头颜色
{source:"1",target:"2",label:"1->2",arrowStyle:{fill:"#ab4",stroke:"#ab4"}}
]
});
//将ID为1的节点移至视口中央
graph.center("1");
</script>
##初始化参数
var graph = new RGraph("canvas",opts);
###opts.drawNodeFn
绘制节点的Raphaeljs扩展方法,默认为`rgraphnode`,RGraph2内部默认实现,自定义节点绘制方法为:
(!Raphael.fn.rgraphnode ) && (Raphael.fn.rgraphnode=function(node){
// your implementation
return {
//移动节点时会调用该方法
move:function(dx,dy){},
//高亮节点时会调用该方法
highlight:function(){},
//清除高亮
unhighlight:function(){},
//更新节点文本
update:function(){}
}
});
具体可以参见RGraph2内部实现
###opts.onnodeclick(e,node)
节点节点触发`function`,参数`event,node`
###opts.onnodemouseover(e,node)
节点mouseover触发`function`,参数`event,node`
###opts.onnodemouseout(e,node)
节点mouseout触发`function`,参数`event,node`
###opts.nnodestartdrag(e,node)
节点开始拖拽触发`function`,参数`event,node`
###opts.onnodedragging(e,node)
节点拖拽中触发`function`,参数`event,node`
###opts.onnodeenddrag(e,node)
节点拖拽结束触发`function`,参数`event,node`
###API
调用方法:graphInstance.method()
###instance.removeNode(nodeId)
删除节点以及节点相关的线
###instance.updateNode(nodeId)
更新节点文本
var node = graphInstance.getNode("nodeId");
node.label = "{name} after update";
graphInstance.updateNode(node.nodeId);
###instance.getNode(nodeId)
根据节点ID获取节点对象
###instance.addNode(node)
添加节点,节点必须有`nodeId`,`label`属性,`rectStyle`用于定义节点边框样式,样式格式详见[Raphaeljs Element.attr](http://raphaeljs.com/reference.html#Element.attr) ,`textStyle`定义文字样式。
新增文字节点位置视口内随机。
graphInstance.addNode({nodeId:"nodeId---",label:"{nodename}",nodename:"Name"});
###instance.existEdge(sourceNodeId,targetNodeId)
是否存在sourceNode与targetNode之间的线,如果有返回该Edge对象,否则返回false
###instance.addEdge(edge)
添加一条线,edge必须有`source`,`target`属性箭头由source->target,`label`属性定义箭头上的label文字。arrowStyle定义箭头的颜色样式,格式以及可以设置的属性参见 [Raphaeljs Element.attr](http://raphaeljs.com/reference.html#Element.attr)
###instance.loadData(graphData)
加载图数据,数据格式见demo
###instance.relayout()
重新布局点->线位置
###instance.getNodeEdges(nodeId)
根据nodeId获取节点相关的边
###instane.reset()
方法倍数设置成1。视口还原。
###instance.center(nodeId)
将nodeId节点移至视口中央
##References
[Raphaeljs](http://raphaeljs.com/)
[Graph JavaScript framework](http://snipplr.com/view/1950/graph-javascript-framework-version-001/)
[Graph visualization code in javascript](http://stackoverflow.com/questions/7034/graph-visualization-code-in-javascript)
[JavaScript Graph Library Showcase](http://www.graphdracula.net/showcase/)
##Knows Issues
`Raphaeljs` `Element.getBBox`方法在IE<9下获取值不正确导致IE9下不能兼容
<hr/>
Thanks,any questions ,contact me freely!
没有合适的资源?快使用搜索试试~ 我知道了~
RGraph是一个基于Raphaeljs完整的点->线图的web实现。.zip
![preview](https://csdnimg.cn/release/downloadcmsfe/public/img/white-bg.ca8570fa.png)
共35个文件
jar:25个
js:3个
sh:1个
![preview-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/scale.ab9e0183.png)
需积分: 5 0 下载量 123 浏览量
2024-08-17
09:14:17
上传
评论
收藏 6.94MB ZIP 举报
温馨提示
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松copy复刻,拿到资料包后可轻松复现出一样的项目,本人系统开发经验充足(全栈开发),有任何使用问题欢迎随时与我联系,我会及时为您解惑,提供帮助 【资源内容】:项目具体内容可查看/点击本页面下方的*资源详情*,包含完整源码+工程文件+说明(若有)等。【若无积分,此资源可私信获取】 【本人专注IT领域】:有任何使用问题欢迎随时与我联系,我会及时解答,第一时间为您提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 【适合场景】:相关项目设计中,皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻,也可基于此项目来扩展开发出更多功能 #注 1. 积分资源不提供技术指导/答疑 2. 本资源仅用于开源学习和技术交流。不可商用等,一切后果由使用者承担 3. 部分字体及插图等来自网络,若是侵权请联系删除,本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于收集和整理资料耗费时间的酬劳
资源推荐
资源详情
资源评论
![zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![text/plain](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![exe](https://img-home.csdnimg.cn/images/20210720083343.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![thumb](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
收起资源包目录
![package](https://csdnimg.cn/release/downloadcmsfe/public/img/package.f3fc750b.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JAR.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/HTML.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
共 35 条
- 1
资源评论
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/309be5d44dcf405b95f4d68867656dba_qrsds.jpg!1)
专家大圣
- 粉丝: 1541
- 资源: 6298
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
最新资源
- jdk - 22.0.2 - windows graalVM
- jdk - 22.0.2 - windows
- 496785224932493FLUENT_VOF&熔化_2D (不含仿真数据).zip
- jdk - 22.0.2 - macos
- 在Windows系统中管理Mac磁盘的实用工具-在Windows系统中创建并使用Mac磁盘,读取Mac磁盘中的文件
- PFC理论基础与Matlab仿真模型学习笔记(1)-PFC电路概述
- 吞食天地2马腾传.nes
- 西部数据发布的一款西数硬盘检测修复工具-支持WD-L/WD-ROYL板,能进行硬盘软复位,可识别硬盘查看或清除-供大家学习参考
- wwwwwwwwwwwwwwwwwww
- 利用恒源云在云端租用GPU服务器训练YOLOv8模型(包括Linux系统命令讲解)_恒源云跑模型-CSDN博客.html
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)