Is there a simple but useful jquery.JsPlumb example?
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
Can anyone give me an Example which answers my Questions?
Thanks in advance.
Answer
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>