A combination of the jsPlumb library that connects elements with the Liviz.js for the positioning of these elements.
In other words: using jsPlumb for the UI (connecting divs), and Liviz.js for the positioning of these elements (divs).
All changes were done to the Liviz.js code, and are:
- Removal of code that writes to the canvas (since I'm using jsPlumb's UI/connectors).
- After getting the new positions of the elements, updating the elements with these positions, and redrawing the connectors (since the connectors are not updated after the divs are computationally moved).
- The "em-dotgen.js" is pretty big, so it was minified.
This combination was worked on for the LNDB.info site as a "character relation diagram" feature.
Update:
I have re-compiled GraphViz's code for the fdp, sfdp, neato, twopi, and circo layout engines. The source code has been added under the src folder. Follow the same steps mentioned here to compile the code...
There are currently six available layout engines:
- dot (via the em-dotgen.min.js javascript file)
- fdp (via the em-fdpgen.min.js javascript file)
- sfdp (via the em-sfdpgen.min.js javascript file)
- neato (via the em-neatogen.min.js javascript file)
- twopi (via the em-twopigen.min.js javascript file)
- circo (via the em-circogen.min.js javascript file)
The example here uses the dot layout engine, but to use other layout engines (fdp, sfdp, neato, twopi, or circo) follow these steps:
- In the jsPlumbChar.htm file, change the content of the div with the id "layout-engine" from dot to the desired layout engine (fdp, sfdp, neato, twopi, or circo).
- In the main.js file, change the value of the LAYOUT_ENGINE variable from dot to the same layout engine you picked in the above step.
More info at the LNDB.info forum.
jsPlumb provides a means for a developer to visually connect elements on their web pages. It uses SVG or Canvas in modern browsers, and VML on IE 8 and below.
An interactive Graphviz in javascript.
- Akikan! character relation diagram
- Strawberry Panic! character relation diagram
- Hidan no Aria character relation diagram
- Sasami-san@Ganbaranai character relation diagram
- Haiyore! Nyaruko-san character relation diagram
- Mushi to Medama character relation diagram
- Kyoukai Senjou no Horizon character relation diagram
All 1.x.x versions of jsPlumb are dual-licensed under both MIT and GPL version 2.
Copyright (c) 2011-2012 Satoshi Ueyama
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.