Toshikatsu Murakoshi edited this page Jun 28, 2015 · 37 revisions

Welcome to the Linkdraw wiki!

Linkdraw is draw tool by json configuration.
Sample and Demo(5 mins interval)

Install

for Github

  1. Get linkdraw.
git clone git://github.com/mtoshi/linkdraw.git
  1. Setup linkdraw.
cd ./linkdraw
bash utils/setup.sh ./dirname
  1. See linkdraw.
http://example.org/dirname/sample.html

for Debian

  1. Install jQuery.
sudo apt-get install libjs-jquery -y
  1. Install D3 and Linkdraw.
    Get D3
wget http://code.linkdraw.org/deb/libjs-d3_3.1.10-1_all.deb

Get Linkdraw

wget http://code.linkdraw.org/deb/libjs-linkdraw_0.2.4-1_all.deb

Install

sudo dpkg -i libjs-d3_3.1.10-1_all.deb libjs-linkdraw_0.2.4-1_all.deb
  1. execute utils/setup.sh:
sudo bash /usr/share/linkdraw/utils/setup.sh dirname

Sample

After setup, you can see some samples.

http://example.org/dirname/sample.html

Demo

Also, you can see linkdraw demo.
This demo changes status of map automatically in seconds.
Please execute "demo.py".

python utils/demo.py dirname/configs/demo_config.json

And access your web server.

http://example.org/dirname/demo.html

Browser Support

Linkdraw supports modern browsers, FireFox, Chrome, Safari and IE9.

How to use linkdraw

Linkdraw is dependent on jQuery and d3.

Please get these javascripts.

wget http://code.jquery.com/jquery-1.10.1.min.js
wget http://code.linkdraw.org/d3/d3-3.1.10.min.js
wget http://code.linkdraw.org/linkdraw.js

After that, please add them in your HTML header.

<script src="jquery-1.10.1.min.js"></script>
<script src="d3-3.1.10.min.js"></script>
<script src="linkdraw.js"></script>

Also, you can direct import those Javascripts as follows.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.linkdraw.org/d3/d3-3.1.10.min.js"></script>
<script src="http://code.linkdraw.org/linkdraw.js"></script>

And add follows(set up some values).

<script type="text/javascript">
  $(function(){
     $("#linkdraw").linkDraw({
       "configPath": "config.json",       // configuration json file.
       "positionPath": "position.json",   // position json file.
       "positionWriter": "write.cgi",     // position writer for save.
       //"positionSave": false,           // position save button.(default enable)
       //"zoom": false,                   // zoom. (default enable)
       //"drag": false,                   // drag. (default enable)
       "width": 1200,                     // svg width
       "height": 600,                     // svg height
       "interval": 300                    // get configuration interval(seconds)
     });
  });
</script>

HTML body side is as follows.

<body>
  <div id="linkdraw"></div>
</body>

Configuration

In the above-mentioned setup, it becomes the file name ”config.json”.

vi config.json

And minimum configuration is as follows.

{
  "lines": [
    { "source": "A", "target": "B","color": "blue", "width": "1", "descr": "blue line", "link": "http://..." }
  ]
}

Not available characters as link source, target and node name.

@#!~$%^*=[]+|“‘.,><:;/{}`¥?

You can see configuration samples.

Position

In the above-mentioned setup, it becomes the file name ”position.json”. A command required for a position file is "touch" only.

touch position.json

Because position is determined at random when the position data is empty. After random drawing, you can move each node with dragging and dropping. And you can keep your preferred arrangement with "SAVE" button. Position file will be written in at the time of this save action.

But, it will be difficult to determine arrangement, when many nodes exist.
If you would like to specify arrangement, please edit a position file as follows.

{
  "position": {

    "DC1-R1": {"y": 100, "x": 100}, 
    "DC1-R2": {"y": 100, "x": 150}, 
    "DC1-SW1": {"y": 150, "x": 100}, 
    "DC1-SW2": {"y": 150, "x": 150}, 

    "DC2-R1": {"y": 200, "x": 200}, 
    "DC2-R2": {"y": 200, "x": 250}, 
    "DC2-SW1": {"y": 250, "x": 200}, 
    "DC2-SW2": {"y": 250, "x": 250}, 

    "DC3-R1": {"y": 300, "x": 300}, 
    "DC3-R2": {"y": 300, "x": 350}, 
    "DC3-SW1": {"y": 350, "x": 300}, 
    "DC3-SW2": {"y": 350, "x": 350}

  }, 
  "scale": 1, 
  "translate": [0, 0]
}
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.