Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lynndon/cloudrelation
a javascript lib, describe the relationship of entities with svg, base on raphael.js
https://github.com/lynndon/cloudrelation
Last synced: 13 days ago
JSON representation
a javascript lib, describe the relationship of entities with svg, base on raphael.js
- Host: GitHub
- URL: https://github.com/lynndon/cloudrelation
- Owner: lynndon
- Created: 2013-06-21T04:50:27.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2013-07-08T05:00:42.000Z (over 11 years ago)
- Last Synced: 2024-08-01T16:33:34.240Z (3 months ago)
- Language: JavaScript
- Size: 136 KB
- Stars: 13
- Watchers: 2
- Forks: 22
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
CloudRelation
=============a javascript lib, describe the relationship of entities with svg, base on raphael.js
使用方法:
var relation = new Relation({node: '#svg-container-view', width:600, height:400, mode: 'edit'}); relation.render(data);
数据json格式:
{"id":"300002", //节点Id
"name":"贾政", //节点名称
"parent":"0", //父节点
"type":"people", //节点类型
"color":"#ff0000", //形状颜色
"shape":6, //形状类型
"weight":15, //权重
"childNodes":[{"id":"400008",
"name":"王夫人",
"parent":"300002",
"weight":10,
"type":"place",
"color":"#F16729",
"shape":1,
"childNodes":[...]}
]
}node: Dom节点
mode:有两种模式,编辑模式和显示模式,编辑模式下形状可以拖动,显示模式下不可以
方法:
relation.preview(); //得到树形数据,包含形状形状的坐标
ralation.save(); //得到数据数组,平面数据
事件:
relation.on('nodeClick', function(e){}); //节点点击事件
ralation.on('relationClick', function(e){}); //两节点关系单击事件e:{x: 967, y: 371, id: "500001", parentId: "400010"}