Dynamic Directed Graph Plugin With jQuery And SVG - Arg-Graph

Arg-Graph

Arg-Graph is a simple free library for creating dynamic Directed Graph using JQuery which enables you to draw SVG based connectors (lines, arrows) between DOM nodes via drag and drop.

Examples/Demos

The best way to become acquainted with the library is to see Demos

How it works

Creating digraph:

You can create a digraph (directed graph) easily by calling the "ArgGraph" function.

<div class="arg-Graph"> </div>

var argGraph=$('.arg-Graph').ArgGraph();

Adding new nodes:

Append html code

You can append new items to the container div, as html code. like this:

<div class="arg-Graph">      <div id="item1" class="arg-Graph_item" data-neighbors="item2,item3" style="left: 259px; top: 22px;">         Title         <span class="arg-Graph_connector-handler"></span>         <span class="arg-Graph_delete-item"></span>     </div>     <div id="item2" class="arg-Graph_item" style="left: 159px; top: 212px;">         Title         <span class="arg-Graph_connector-handler"></span>         <span class="arg-Graph_delete-item"></span>     </div> </div>

Now you must refresh the graph by calling 'refresh' function.

argGraph.refresh()

import new item/s

Creating a JavaScript object and import that to the graph:

newItem = {         "id": "item1",         "text": "Start",         "position": {             "left": "259px",             "top": "22px"         },         "neighbors": [             "item2",             "item3"         ]     } argGraph.import(newItem)

Note: You can append multiple items as array object using "import" function.

import JSON object

You can import this object as JSON format by calling "importJson" function.

var json=JSON.stringify(newItem,null,4); argGraph.importJson(json);

Output

By calling "export"/"exportJson" function you can get a JavaScript/JSON object similar to the import object format:

var json = argGraph.exportJson();  result: [     {         "id": "item7",         "text": "Test",         "position": {             "left": "531.328px",             "top": "406px"         },         "neighbors": [             "item8"         ]     },     {         "id": "item8",         "text": "Deployment",         "position": {             "left": "373.328px",             "top": "463px"         },         "neighbors": [             "item9"         ]     },     {         "id": "item9",         "text": "Test",         "position": {             "left": "239.328px",             "top": "515px"         },         "neighbors": ""     } ]

Author

Naser Yousefi