Connecting spheres with lines


I currently have a project where I would like to have one central sphere surrounded by other spheres wich are connected by lines. I worked with Jsplumb ([url removed, login to view])

Here is what I already have: [url removed, login to view]

There are two main problems:

1. The spheres are not connected nicely when you drag them around.

2. When you drag one sphere over another and you release it, first the line goes back to its original position, then the sphere, this sould happen simultanously.

For the first problem I already contacted the guys from jsplumb where i got the following response:

"Van: Simon Porritt <>

Datum: 10 juli 2012 01:55:26 GMT+02:00

Aan: Stijn Hoste <>

Onderwerp: Antw.: Smooth connection of spheres

You're welcome - let me know how you go, or if you need any more help. I am definitely interested in pursuing this at some stage, and defining a perimeter as a series of dynamic anchors seems to me to be the simplest way to drop the functionality on top of what jsPlumb already does. But there might be a few things we can do to integrate it into the API a little - like some kind of helper that says "anchors for this element are those of a circle whose radius is such and such (or whose radius is the width/height of the element)"....that sort of thing. it may even be possible for jsPlumb to work directly with SVG paths or shapes etc.

I'm always interested in improving the API so I'll be interested to hear how this goes.


On Mon, Jul 9, 2012 at 8:26 PM, Stijn Hoste <> wrote:


Thank you very much for your fast response. I'll have a look at the example you provided me.

Best regards

Stijn Hoste

Op 8-jul.-2012 om 23:20 heeft Simon Porritt <> het volgende geschreven:


At the moment no, not directly. What you ideally need is for the anchor points to be located on the perimeter of each sphere, but jsPlumb uses an [x,y] coordinate system for positioning anchors. I suppose you could use 'dynamic' anchors like in this example:

[url removed, login to view]

...and just use points that you have calculated to lie on the perimeter of the circle (the more the better of course).

This is something I have thought about for a future release but I won't have the time to look at it in the near future.


On Mon, Jul 9, 2012 at 5:10 AM, Stijn Hoste <> wrote:


Is there any way I can make the connection of the lines and the spheres more smooth in this example? ([url removed, login to view])

Thanks a lot for your time!

Best regards

Stijn Hoste"

I hope you will be able to fix this for me, because I can't :).

Compétences : AJAX, HTML, Javascript

en voir plus : jsplumb coordinate, thank you you're welcome, svg 2, lines of a circle, jquery release, is a circle a line, element 8, dynamic problems, demo html 5, defining you, jsplumb perimeter example, jquery ajax api, webxtreams, svg javascript html, Sphere, simon says, om, jsPlumb, het, circle of hope, api response time, radius drop, jquery html sort, javascript connection, jquery ajax dynamic

Concernant l'employeur :
( 5 commentaires ) Koksijde, Belgium

Nº du projet : #2324122

4 freelance font une offre moyenne de €142 pour ce travail


I can do this project easily.

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% EUR en 7 jours
(0 Commentaires)

Custom software development - <b><i>Removed by Admin</i></b>

%bids___i_sum_sub_32% %project_currencyDetails_sign_sub_33% EUR en 1 jour
(0 Commentaires)

Hi I am professional to do this kind of work as i have done it in graphics

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% EUR en 5 jours
(0 Commentaires)

Hello. I read all your requirements and I am a skilful expert whom you are finding now. I will do my best and its satisfy all your requirements. Thanks.

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% EUR en 7 jours
(1 Évaluation)