- DOT language playground- -
-
- - - - |
- |
| - - | -- - | -
+ Network supports the DOT language. +
+ + + + + diff --git a/examples/network/categories/data/dotLanguage/dotPlayground.html b/examples/network/categories/data/dotLanguage/dotPlayground.html new file mode 100644 index 00000000..f9b08652 --- /dev/null +++ b/examples/network/categories/data/dotLanguage/dotPlayground.html @@ -0,0 +1,208 @@ + + + ++ Play around with the DOT language in the textarea below, or select one of the following examples: +
++ simple, + computer network, + cellular automata, + fsm *, + hello *, + process *, + siblings *, + softmaint *, + traffic lights *, + transparency *, + twopi2 *, + unix *, + world * +
++ The examples marked with a star (*) come straight from the GraphViz gallery. +
+- Network supports the DOT language. -
- - - - - diff --git a/examples/network/graphviz/graphviz_gallery.html b/examples/network/graphviz/graphviz_gallery.html deleted file mode 100644 index 913ccacb..00000000 --- a/examples/network/graphviz/graphviz_gallery.html +++ /dev/null @@ -1,86 +0,0 @@ - - -- The following examples are unmodified copies from the - Graphviz Gallery. -
-- 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). -
- -- - -
- - - - - diff --git a/lib/network/dotparser.js b/lib/network/dotparser.js index dd0c73f7..6e38c9e8 100644 --- a/lib/network/dotparser.js +++ b/lib/network/dotparser.js @@ -4,6 +4,8 @@ * * 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 * @return {Object} graph An object containing two parameters: * {Object[]} nodes @@ -14,6 +16,20 @@ function parseDOT (data) { 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 var TOKENTYPE = { 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 * with nodes and edges in the format of graph. @@ -746,7 +820,7 @@ function DOTToGraph (data) { id: dotNode.id, label: String(dotNode.label || dotNode.id) }; - merge(graphNode, dotNode.attr); + merge(graphNode, convertAttr(dotNode.attr, NODE_ATTR_MAPPING)); if (graphNode.image) { graphNode.shape = 'image'; } @@ -766,7 +840,7 @@ function DOTToGraph (data) { from: dotEdge.from, to: dotEdge.to }; - merge(graphEdge, dotEdge.attr); + merge(graphEdge, convertAttr(dotEdge.attr, EDGE_ATTR_MAPPING)); graphEdge.arrows = (dotEdge.type === '->') ? 'to' : undefined; 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) { to = dotEdge.to.nodes; }