jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Merge remote-tracking branch 'origin/v4' into v4 

Conflicts:
	dist/vis.js
flowchartTest
Alex de Mulder 9 years ago
parent
ad2d70ed8b a1d9310090
commit
ea6603606d
23 changed files with 366 additions and 330 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -219
      examples/network/categories/data/JOIN ME WITH GRAPHVIZ.html
  2. +23
    -0
      examples/network/categories/data/dotLanguage/data/cellular_automata.gv.txt
  3. +19
    -0
      examples/network/categories/data/dotLanguage/data/computer_network.gv.txt
  4. +15
    -0
      examples/network/categories/data/dotLanguage/data/simple.gv.txt
  5. +22
    -0
      examples/network/categories/data/dotLanguage/dotLanguage.html
  6. +208
    -0
      examples/network/categories/data/dotLanguage/dotPlayground.html
  7. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/fsm.gv.txt
  8. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/hello.gv.txt
  9. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/process.gv.txt
  10. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/fsm.png
  11. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/hello.png
  12. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/softmaint.png
  13. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/traffic_lights.png
  14. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/siblings.gv.txt
  15. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/softmaint.gv.txt
  16. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/traffic_lights.gv.txt
  17. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/transparency.gv.txt
  18. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/twopi2.gv.txt
  19. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/unix.gv.txt
  20. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/world.gv.txt
  21. +0
    -23
      examples/network/categories/data/dot_language.html
  22. +0
    -86
      examples/network/graphviz/graphviz_gallery.html
  23. +79
    -2
      lib/network/dotparser.js

+ 0
- 219
examples/network/categories/data/JOIN ME WITH GRAPHVIZ.html View File

@ -1,219 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | DOT language playground</title>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font: 10pt sans;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #4d4d4d;
}
#frame {
width: 100%;
height: 99%;
}
#frame td {
padding: 10px;
height: 100%;
}
#error {
color: red;
}
#data {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
}
#mynetwork {
float: left;
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
}
textarea.example {
display: none;
}
</style>
<script src="../../../googleAnalytics.js"></script>
</head>
<body onload="drawExample('example1')">
<table id="frame">
<col width="50%">
<col width="50%">
<tr>
<td colspan="2" style="height: 50px;">
<h1>DOT language playground</h1>
<div>
<a href="javascript: drawExample('example1')">example 1</a>
<a href="javascript: drawExample('example2')">example 2</a>
<a href="javascript: drawExample('example3')">example 3</a>
</div>
<div>
<br>
<button id="draw">Draw</button>
<span id="error"></span>
</div>
</td>
</tr>
<tr>
<td>
<textarea id="data"></textarea>
</td>
<td>
<div id="mynetwork"></div>
</td>
</tr>
</table>
<script type="text/javascript">
var network = null;
var data = null;
var btnDraw = document.getElementById('draw');
var txtData = document.getElementById('data');
var txtError = document.getElementById('error');
btnDraw.onclick = draw;
// resize the network when window resizes
window.onresize = function () {
network.redraw()
};
function destroy() {
if (network !== null) {
network.destroy();
network = null;
}
}
// parse and draw the data
function draw () {
destroy();
try {
txtError.innerHTML = '';
// Provide a string with data in DOT language
data = {
dot: txtData.value
};
// create a network
var container = document.getElementById('mynetwork');
var options = {
physics: {
barnesHut: {
springLength: 200
}
}
};
network = new vis.Network(container, data, options);
}
catch (err) {
// set the cursor at the position where the error occurred
var match = /\(char (.*)\)/.exec(err);
if (match) {
var pos = Number(match[1]);
if(txtData.setSelectionRange) {
txtData.focus();
txtData.setSelectionRange(pos, pos);
}
}
// show an error message
txtError.innerHTML = err.toString();
}
}
/**
* Draw an example
* @param {String} id HTML id of the textarea containing the example code
*/
function drawExample(id) {
txtData.value = document.getElementById(id).value;
draw();
}
</script>
<textarea id="example1" class="example">
digraph {
node [shape=circle fontSize=16]
edge [length=100, color=gray, fontColor=black]
A -> A[label=0.5];
B -> B[label=1.2] -> C[label=0.7] -- A;
B -> D;
D -> {B; C}
D -> E[label=0.2];
F -> F;
A [
fontColor=white,
color=red,
]
}
</textarea>
<textarea id="example2" class="example">
digraph topology
{
node[shape=circle fontSize=12]
edge[length=170 fontSize=12]
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.2" -> "10.0.255.1"[label="1.000"];
"10.0.255.2" -> "10.0.255.3"[label="1.000"];
"10.0.255.3" -> "10.0.255.1"[label="1.000"];
"10.0.255.3" -> "10.0.255.2"[label="1.000"];
"10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
"10.0.3.0/24"[shape=box];
"10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
"10.0.2.0/24"[shape=box];
"10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
"10.0.1.0/24"[shape=box];
}
</textarea>
<textarea id="example3" class="example">
digraph G {
// note: not all attributes are recognized and supported by Network
// unrecognized attributes are ignored
node[width=.25,height=.375,fontsize=15]
node [shape=filled fillcolor=#F1AAF0]
0-> 0 ;
1-> 1 ;
2-> 2 ;
3-> 3 ;
4-> 4 ;
5-> 5 ;
6-> 6 ;
7-> 5 ;
8-> 8 ;
9-> 9 ;
10-> 10 ;
11-> 10 ;
12-> 12 ;
13-> 5 ;
14-> 10 ;
15-> 0 ;
}
</textarea>
</body>
</html>

+ 23
- 0
examples/network/categories/data/dotLanguage/data/cellular_automata.gv.txt View File

@ -0,0 +1,23 @@
digraph G {
// note: not all attributes are recognized and supported by Network
// unrecognized attributes are ignored
node[width=.25,height=.375,fontsize=15]
node [shape=filled color=#FF00FF fillcolor=#F1AAF0]
0-> 0 ;
1-> 1 ;
2-> 2 ;
3-> 3 ;
4-> 4 ;
5-> 5 ;
6-> 6 ;
7-> 5 ;
8-> 8 ;
9-> 9 ;
10-> 10 ;
11-> 10 ;
12-> 12 ;
13-> 5 ;
14-> 10 ;
15-> 0 ;
}

+ 19
- 0
examples/network/categories/data/dotLanguage/data/computer_network.gv.txt View File

@ -0,0 +1,19 @@
digraph topology
{
node[shape=circle fontsize=12]
edge[length=170 fontsize=12]
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.2" -> "10.0.255.1"[label="1.000"];
"10.0.255.2" -> "10.0.255.3"[label="1.000"];
"10.0.255.3" -> "10.0.255.1"[label="1.000"];
"10.0.255.3" -> "10.0.255.2"[label="1.000"];
"10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
"10.0.3.0/24"[shape=box];
"10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
"10.0.2.0/24"[shape=box];
"10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
"10.0.1.0/24"[shape=box];
}

+ 15
- 0
examples/network/categories/data/dotLanguage/data/simple.gv.txt View File

@ -0,0 +1,15 @@
digraph {
node [shape=circle fontsize=16]
edge [length=100, color=gray, fontcolor=black]
A -> A[label=0.5];
B -> B[label=1.2] -> C[label=0.7] -- A;
B -> D;
D -> {B; C}
D -> E[label=0.2];
F -> F;
A [
fontcolor=white,
color=red,
]
}

+ 22
- 0
examples/network/categories/data/dotLanguage/dotLanguage.html View File

@ -0,0 +1,22 @@
<html>
<head>
<title>Network | DOT Language</title>
<script src="../../../../../dist/vis.js"></script>
<link href="../../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../../../googleAnalytics.js"></script>
</head>
<body>
<p>
Network supports the DOT language.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
var container = document.getElementById('mynetwork');
var dot = 'dinetwork {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
var data = vis.network.convertDot(dot);
var network = new vis.Network(container, data);
</script>
</body>
</html>

+ 208
- 0
examples/network/categories/data/dotLanguage/dotPlayground.html View File

@ -0,0 +1,208 @@
<!doctype html>
<html>
<head>
<title>Network | DOT language playground</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../../../../../dist/vis.js"></script>
<link href="../../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font: 10pt sans;
line-height: 1.5em;;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #4d4d4d;
box-sizing: border-box;
overflow: hidden;
}
#header {
margin: 0;
padding: 10px;
box-sizing: border-box;
}
#contents {
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
#left, #right {
position: absolute;
width: 50%;
height: 100%;
margin: 0;
padding: 10px;
box-sizing: border-box;
display: inline-block;
}
#left {
top: 0;
left: 0;
}
#right {
top: 0;
right: 0;
}
#error {
color: red;
}
#data {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
resize: none;
}
#draw {
padding: 5px 15px;
}
#mynetwork {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
}
a:hover {
color: red;
}
</style>
<script src="../../../../googleAnalytics.js"></script>
</head>
<body>
<div id="header">
<h1>DOT language playground</h1>
<p>
Play around with the DOT language in the textarea below, or select one of the following examples:
</p>
<p style="margin-left: 30px;">
<a href="#" class="example" data-url="data/simple.gv.txt">simple</a>,
<a href="#" class="example" data-url="data/computer_network.gv.txt">computer network</a>,
<a href="#" class="example" data-url="data/cellular_automata.gv.txt">cellular automata</a>,
<a href="#" class="example" data-url="graphvizGallery/fsm.gv.txt">fsm *</a>,
<a href="#" class="example" data-url="graphvizGallery/hello.gv.txt">hello *</a>,
<a href="#" class="example" data-url="graphvizGallery/process.gv.txt">process *</a>,
<a href="#" class="example" data-url="graphvizGallery/siblings.gv.txt">siblings *</a>,
<a href="#" class="example" data-url="graphvizGallery/softmaint.gv.txt">softmaint *</a>,
<a href="#" class="example" data-url="graphvizGallery/traffic_lights.gv.txt">traffic lights *</a>,
<a href="#" class="example" data-url="graphvizGallery/transparency.gv.txt">transparency *</a>,
<a href="#" class="example" data-url="graphvizGallery/twopi2.gv.txt">twopi2 *</a>,
<a href="#" class="example" data-url="graphvizGallery/unix.gv.txt">unix *</a>,
<a href="#" class="example" data-url="graphvizGallery/world.gv.txt">world *</a>
</p>
<p>
The examples marked with a star (*) come straight from the <a href="http://www.graphviz.org/Gallery.php">GraphViz gallery</a>.
</p>
<div>
<button id="draw">Draw</button>
<span id="error"></span>
</div>
</div>
<div id="contents">
<div id="left">
<textarea id="data">
digraph {
node [shape=circle fontsize=16]
edge [length=100, color=gray, fontcolor=black]
A -> A[label=0.5];
B -> B[label=1.2] -> C[label=0.7] -- A;
B -> D;
D -> {B; C}
D -> E[label=0.2];
F -> F;
A [
fontcolor=white,
color=red,
]
}
</textarea>
</div>
<div id="right">
<div id="mynetwork"></div>
</div>
</div>
<script type="text/javascript">
// create a network
var container = document.getElementById('mynetwork');
var options = {
physics: {
stabilization: false,
barnesHut: {
springLength: 200
}
}
};
var data = {};
var network = new vis.Network(container, data, options);
$('#draw').click(draw);
$('a.example').click(function (event) {
var url = $(event.target).data('url');
$.get(url)
.done(function(dotData) {
$('#data').val(dotData);
draw();
})
.fail(function () {
$('#error').html('Error: Cannot fetch the example data because of security restrictions in JavaScript. Run the example from a server instead of as a local file to resolve this problem. Alternatively, you can copy/paste the data of DOT graphs manually in the textarea below.');
resize();
});
});
$(window).resize(resize);
$(window).load(draw);
function resize() {
$('#contents').height($('body').height() - $('#header').height() - 30);
}
function draw () {
try {
resize();
$('#error').html('');
// Provide a string with data in DOT language
data = vis.network.convertDot($('#data').val());
network.setData(data);
}
catch (err) {
// set the cursor at the position where the error occurred
var match = /\(char (.*)\)/.exec(err);
if (match) {
var pos = Number(match[1]);
var textarea = $('#data')[0];
if(textarea.setSelectionRange) {
textarea.focus();
textarea.setSelectionRange(pos, pos);
}
}
// show an error message
$('#error').html(err.toString());
}
}
</script>
</body>
</html>

examples/network/graphviz/data/fsm.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/fsm.gv.txt View File


examples/network/graphviz/data/hello.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/hello.gv.txt View File


examples/network/graphviz/data/process.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/process.gv.txt View File


examples/network/graphviz/screenshots/fsm.png → examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/fsm.png View File


examples/network/graphviz/screenshots/hello.png → examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/hello.png View File


examples/network/graphviz/screenshots/softmaint.png → examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/softmaint.png View File


examples/network/graphviz/screenshots/traffic_lights.png → examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/traffic_lights.png View File


examples/network/graphviz/data/siblings.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/siblings.gv.txt View File


examples/network/graphviz/data/softmaint.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/softmaint.gv.txt View File


examples/network/graphviz/data/traffic_lights.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/traffic_lights.gv.txt View File


examples/network/graphviz/data/transparency.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/transparency.gv.txt View File


examples/network/graphviz/data/twopi2.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/twopi2.gv.txt View File


examples/network/graphviz/data/unix.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/unix.gv.txt View File


examples/network/graphviz/data/world.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/world.gv.txt View File


+ 0
- 23
examples/network/categories/data/dot_language.html View File

@ -1,23 +0,0 @@
<html>
<head>
<title>Network | DOT Language</title>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../../googleAnalytics.js"></script>
</head>
<body>
<p>
Network supports the DOT language.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
var container = document.getElementById('mynetwork');
var data = {
dot: 'dinetwork {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
};
var network = new vis.Network(container, data);
</script>
</body>
</html>

+ 0
- 86
examples/network/graphviz/graphviz_gallery.html View File

@ -1,86 +0,0 @@
<html>
<head>
<title>Network | Graphviz Gallery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<style type="text/css">
p {
width: 600px;
}
html, body, select {
font: 11pt arial;
}
#mygraph {
width: 100%;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<body>
<script>
if (location.href.substr(0, 5) == 'file:') {
document.write(
'<p style="color: red;">' +
'Error: Cannot fetch the example data because of security ' +
'restrictions in JavaScript. Run the example from a server ' +
'instead of as a local file to resolve this problem. ' +
'Alternatively, you can load DOT graphs in ' +
'the <a href="../15_dot_language_playground.html" ' +
'style="color:red;">playground</a>.' +
'</p>');
}
</script>
<p>
The following examples are unmodified copies from the
<a href="http://www.graphviz.org/Gallery.php" target="_blank">Graphviz Gallery</a>.
</p>
<p>
Note that some style attributes of Graphviz are not supported by vis.js,
and that vis.js offers options not supported by Graphviz (which could make
some examples look much nicer).
</p>
<p>
<label for="url">Select an example:</label>
<select id="url" onchange="loadData()">
<option value="data/fsm.gv.txt">fsm</option>
<option value="data/hello.gv.txt">hello</option>
<option value="data/process.gv.txt">process</option>
<option value="data/siblings.gv.txt">siblings</option>
<option value="data/softmaint.gv.txt">softmaint</option>
<option value="data/traffic_lights.gv.txt">traffic_lights</option>
<option value="data/transparency.gv.txt">transparency</option>
<option value="data/twopi2.gv.txt">twopi2</option>
<option value="data/unix.gv.txt">unix</option>
<option value="data/world.gv.txt">world</option>
</select>
</p>
<div id="mygraph"></div>
<script type="text/javascript">
var container = document.getElementById('mygraph');
var url = document.getElementById('url');
var network = new vis.Network(container,{},{physics:{barnesHut:{springLength:75,springConstant:0.015}}});
function loadData () {
$.ajax({
type: "GET",
url: url.value
}).done(function(data) {
network.setOptions({
stabilize: false
});
network.setData( {
dot: data
});
});
}
loadData();
</script>
</body>
</html>

+ 79
- 2
lib/network/dotparser.js View File

@ -4,6 +4,8 @@
* *
* DOT language reference: http://www.graphviz.org/doc/info/lang.html * DOT language reference: http://www.graphviz.org/doc/info/lang.html
* *
* DOT language attributes: http://graphviz.org/content/attrs
*
* @param {String} data Text containing a graph in DOT-notation * @param {String} data Text containing a graph in DOT-notation
* @return {Object} graph An object containing two parameters: * @return {Object} graph An object containing two parameters:
* {Object[]} nodes * {Object[]} nodes
@ -14,6 +16,20 @@ function parseDOT (data) {
return parseGraph(); return parseGraph();
} }
// mapping of attributes from DOT (the keys) to vis.js (the values)
var NODE_ATTR_MAPPING = {
'fontsize': 'font.size',
'fontcolor': 'font.color',
'labelfontcolor': 'font.color',
'fontname': 'font.face',
'color': ['color.border', 'color.background'],
'fillcolor': 'color.background',
'tooltip': 'title',
'labeltooltip': 'title'
};
var EDGE_ATTR_MAPPING = Object.create(NODE_ATTR_MAPPING);
EDGE_ATTR_MAPPING.color = 'color.color';
// token types enumeration // token types enumeration
var TOKENTYPE = { var TOKENTYPE = {
NULL : 0, NULL : 0,
@ -724,6 +740,64 @@ function forEach2(array1, array2, fn) {
} }
} }
/**
* Set a nested property on an object
* When nested objects are missing, they will be created.
* For example setProp({}, 'font.color', 'red') will return {font: {color: 'red'}}
* @param {Object} object
* @param {string} path A dot separated string like 'font.color'
* @param {*} value Value for the property
* @return {Object} Returns the original object, allows for chaining.
*/
function setProp(object, path, value) {
var names = path.split('.');
var prop = names.pop();
// traverse over the nested objects
var obj = object;
for (var i = 0; i < names.length; i++) {
var name = names[i];
if (!(name in obj)) {
obj[name] = {};
}
obj = obj[name];
}
// set the property value
obj[prop] = value;
return object;
}
/**
* Convert an object with DOT attributes to their vis.js equivalents.
* @param {Object} attr Object with DOT attributes
* @param {Object} mapping
* @return {Object} Returns an object with vis.js attributes
*/
function convertAttr (attr, mapping) {
var converted = {};
for (var prop in attr) {
if (attr.hasOwnProperty(prop)) {
var visProp = mapping[prop];
if (Array.isArray(visProp)) {
visProp.forEach(function (visPropI) {
setProp(converted, visPropI, attr[prop]);
})
}
else if (typeof visProp === 'string') {
setProp(converted, visProp, attr[prop]);
}
else {
setProp(converted, prop, attr[prop]);
}
}
}
return converted;
}
/** /**
* Convert a string containing a graph in DOT language into a map containing * Convert a string containing a graph in DOT language into a map containing
* with nodes and edges in the format of graph. * with nodes and edges in the format of graph.
@ -746,7 +820,7 @@ function DOTToGraph (data) {
id: dotNode.id, id: dotNode.id,
label: String(dotNode.label || dotNode.id) label: String(dotNode.label || dotNode.id)
}; };
merge(graphNode, dotNode.attr);
merge(graphNode, convertAttr(dotNode.attr, NODE_ATTR_MAPPING));
if (graphNode.image) { if (graphNode.image) {
graphNode.shape = 'image'; graphNode.shape = 'image';
} }
@ -766,7 +840,7 @@ function DOTToGraph (data) {
from: dotEdge.from, from: dotEdge.from,
to: dotEdge.to to: dotEdge.to
}; };
merge(graphEdge, dotEdge.attr);
merge(graphEdge, convertAttr(dotEdge.attr, EDGE_ATTR_MAPPING));
graphEdge.arrows = (dotEdge.type === '->') ? 'to' : undefined; graphEdge.arrows = (dotEdge.type === '->') ? 'to' : undefined;
return graphEdge; return graphEdge;
@ -783,6 +857,9 @@ function DOTToGraph (data) {
} }
} }
// TODO: support of solid/dotted/dashed edges (attr = 'style')
// TODO: support for attributes 'dir' and 'arrowhead' (edge arrows)
if (dotEdge.to instanceof Object) { if (dotEdge.to instanceof Object) {
to = dotEdge.to.nodes; to = dotEdge.to.nodes;
} }

Write Preview
Loading…
Cancel
Save