SummArg | Cursos y recursos para webmasters

03/08/2011

Diagramas interactivos con JointJS

JointJS es una librería Javascript que permite la creación de diagramas con dibujos vectoriales (gracias a Raphaël.js) y con la posibilidad de ofrecer al usuario interactuar modificando el orden de los elementos mediante drag & drop.

Para realizar un diagrama simple primero debemos adjuntar los siguientes archivos a nuestro documento:

<script src="raphael-min.js" type="text/javascript"></script>a
<script src="joint.min.js" type="text/javascript"></script>
<script src="joint.dia.min.js" type="text/javascript"></script>
<script src="joint.dia.fsa.min.js" type="text/javascript"></script>

Alternativamente se puede linkear solamente al archivo joint.all-min.js que contiene la versión minified de todos los anteriormente vinculados.

Entre etiquetas <body> colocamos un contenedor.

<div id="hello_world"></>

y antes del cierre de </body> ingresamos el contenido del contenedor.

<script type="text/javascript">
var r = Raphael("hello_world", 1000, 50),
c1 = r.circle(50, 20, 10),
c2 = r.circle(250, 25, 10);
c1.joint(c2);
</script>

Demos | Descargas | Visto en webresourcesdepot

Dejar un comentario