Is there a simple but useful jquery.JsPlumb example? [closed]

F

2

20

For the last week I've been searching for some graph-visualization javascript-library and I've stumbled upon jsPlumb, which is judging by the examples I've seen, the best looking and most advanced library I've seen so far. The documentation is, while being quite big, not very helpful as I cannot figure out how to actually perform the most essential tasks.

My list of questions includes:

How do I tell the graph to use predefined elements of the DOM-Tree?
What part of these elements will be displayed?
While making connections is easy, how do I define the alignment?

While these questions remain, there are a few examples, but either they are to simple to be of any use (see example 1), or they are so complex that even retrieving(well the download isn't a problem, but I don't really want to analyse everything before playing around with some library...) the code is at least for me impossible (see https://github.com/sporritt/jsPlumb/tree/master/demo).

Example 1

 <head>
  <script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
  </script>
  <script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js">
  </script>
  <script type="text/javascript" 
     src="PATH_TO/jquery.jsPlumb-1.3.15-all-min.js ">
  </script>
  <script type="text/javascript">
     jsPlumb.bind("ready", function() {
        var e0 = jsPlumb.addEndpoint("container0"),
        e1 = jsPlumb.addEndpoint("container1");

        jsPlumb.connect({ source:e0, target:e1 });
     });
 </script>
 </head>
 <body>
   <div id="container0">
   </div>
   <div id="container1">
   </div>
 </body>

Which results in Screenshot of Example 1

Can anyone give me an Example which answers my Questions?

Thanks in advance.

Fibrilliform answered 22/10, 2012 at 12:12 Comment(0)

F

15

Try adding this just before the closing head tag ...

<style type="text/css">
    #container0, #container1 {
        float: left;
        height: 100px;
        width: 100px;
        border: 1px solid black;
        margin: 10px;
    }
</style>

Fagin answered 12/12, 2012 at 0:27 Comment(0)

M

3

There's nothing wrong with what you've got there, but your divs have no styling and are not positioned.

I'd suggest positioning them absolute, give them each a top/left, and maybe a border, and you will see something a little more useful.

Midpoint answered 23/10, 2012 at 5:39 Comment(0)

Recommended topics

Hot tags