Menu
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:
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.
279
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>
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.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
