jsPlumb toolkit

Question

Is it possible in jsPlumb toolkit to dynamically position the content based on the number and type of objects to be drawn and connected. I mean currently the example they gave, uses css to position the each nodes which is not a good option when we are dynamically generating the visualization as we wont know how much number of objects(nodes) will be available in a network. Is it posible to make it dynamic?

NB: Totally newbie in jsplumb.

Just position your elements dynamically using JS to set their top/left — Ruan Mendes, Feb 10 '13 at 05:19
is there any such default option in jsPlumb? can you get me a sample code stuff that may help in developing mine. I'm trying to draw network topology of an institution. New nodes may come sometimes, may get removed too. nodes details are provided by snmp — Prashanth Shyamprasad, Feb 10 '13 at 11:08

score 3 · Accepted Answer · answered Feb 10 '13 at 02:15

3

No. It's up to you to position your elements. jsPlumb simply 'plumbs' them.

answered Feb 10 '13 at 02:15

jungos

476
5
21

but there should be some way to automate it. after all its an established plugin – Prashanth Shyamprasad Feb 10 '13 at 11:12
1

If automatic graph layout is important to you, I'd suggest using a graphing framework like the ones suggested here: http://stackoverflow.com/a/2366237/881011 – jungos Feb 10 '13 at 19:27

score 1 · Answer 2 · answered Feb 12 '17 at 10:33

yes, it is possible (well, four years after the accepted answer, but still). Consider how you want your nodes to be drawn first. If you would like to draw a tree or organizational chart, for example, you may want to use the hierarchical layout by setting the surface option layout type like so:

var toolkit = jsPlumbToolkit.newInstance();

//... load data...

var surface = toolkit.render({
    container:"someElement",
    layout:{
    type:"Hierarchical",
    parameters:{
      padding:[ 50, 50 ]
    }
  }
});

When using this layout type, jsplumb will dynamically position the nodes automatically.

jsPlumb toolkit

2 Answers2