Rassoci is a js associate svg elements on top Raphael.js
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Raphael <--> ASSOCIation

That's a library to allow associate elements svg inspired by mxGraph on top of RaphaelJs.

Quick start

Creating a new instance :

var graph = new Rassoci({holder : 'holder'}); 

Including a circle to graph.

var el = graph.include('circle', 20, 30, 10);

Append an event to element early created

graph.append('click', el, function(){ alert('wow that was qick')});

All elements created by Rassoci already have the functionality of drag'n'drop to associate each oder by a line draw on graph.


Creating a new instance of Rassoci have three possible params :

holder     - Id of tag html not selector.
width      - Width of holder.
height     - Height of holder. 
r          - Instance of rapahel with you already work with one. 
collection - Set of elements to be attached on this svg. 
attr       - Styles of elements that will be created by rassoci.

With an instance of Rassoci give to you two main methods to work (so far)


That return a new element previously included. With have different params depend on which element you want to include

element   - Name of kind element that you want to include (cirlc/ellipse/rect);
x 		  - Position x; 	
y 		  - Position y; 

in case of rect

width    - Width of rect
height   - Height of rect

in case of circle

radius   - Radius of Circle 

in case of ellipse

radiusX  - Radius x of ellipse 
radiusY  - Radius y of ellipse 


This method allow you to append a new event to an specific element given.

event   - Name of event that you want to attach (see jQuery event bind to more information)
el      - Element that you want to attach the event (if none element was given that will be bind to all elements exitents)
fn      - Call back to event created.


Receive a function that will be called after any association and that function has 2 params the source and the target element.

fn     - Function to be called after any association.