Added support in DOT parser for attributes with namespaces (like color.border=red)

src/graph/dotparser.js

@@ -103,6 +103,37 @@
         return a;
     }
 
+    /**
+     * Set a value in an object, where the provided parameter name can be a
+     * path with nested parameters. For example:
+     *
+     *     var obj = {a: 2};
+     *     setValue(obj, 'b.c', 3);     // obj = {a: 2, b: {c: 3}}
+     *
+     * @param {Object} obj
+     * @param {String} path  A parameter name or dot-separated parameter path,
+     *                      like "color.highlight.border".
+     * @param {*} value
+     */
+    function setValue(obj, path, value) {
+        var keys = path.split('.');
+        var o = obj;
+        while (keys.length) {
+            var key = keys.shift();
+            if (keys.length) {
+                // this isn't the end point
+                if (!o[key]) {
+                    o[key] = {};
+                }
+                o = o[key];
+            }
+            else {
+                // this is the end point
+                o[key] = value;
+            }
+        }
+    }
+
     /**
      * Add a node to the current graph object. If there is already a node with
      * the same id, their attributes will be merged.
@@ -469,7 +500,7 @@
                     throw newSyntaxError('Attribute value expected');
                 }
                 var value = token;
-                attr[name] = value;
+                setValue(attr, name, value); // name can be a path
 
                 getToken();
                 if (token ==',') {

test/dotparser.js

@@ -8,116 +8,115 @@ fs.readFile('test/dot.txt', function (err, data) {
     var graph = dot.parseDOT(data);
 
     assert.deepEqual(graph, {
-            "type": "digraph",
-            "id": "test_graph",
-            "attr": {
-                "rankdir": "LR",
-                "size": "8,5",
-                "font": "arial",
-                "attr1": "another\" attr"
+        "type": "digraph",
+        "id": "test_graph",
+        "attr": {
+            "rankdir": "LR",
+            "size": "8,5",
+            "font": "arial",
+            "attr1": "another\" attr"
+        },
+        "nodes": [
+            {
+                "id": "node1",
+                "attr": {
+                    "shape": "doublecircle"
+                }
+            },
+            {
+                "id": "node2",
+                "attr": {
+                    "shape": "doublecircle"
+                }
+            },
+            {
+                "id": "node3",
+                "attr": {
+                    "shape": "doublecircle"
+                }
+            },
+            {
+                "id": "node4",
+                "attr": {
+                    "shape": "diamond",
+                    "color": "red"
+                }
+            },
+            {
+                "id": "node5",
+                "attr": {
+                    "shape": "square",
+                    "color": "blue",
+                    "width": 3
+                }
+            },
+            {
+                "id": 6,
+                "attr": {
+                    "shape": "circle"
+                }
+            }
+        ],
+        "edges": [
+            {
+                "from": "node1",
+                "to": "node1",
+                "type": "->",
+                "attr": {
+                    "length": 170,
+                    "fontSize": 12,
+                    "label": "a"
+                }
+            },
+            {
+                "from": "node2",
+                "to": "node3",
+                "type": "->",
+                "attr": {
+                    "length": 170,
+                    "fontSize": 12,
+                    "label": "b"
+                }
+            },
+            {
+                "from": "node1",
+                "to": "node4",
+                "type": "--",
+                "attr": {
+                    "length": 170,
+                    "fontSize": 12,
+                    "label": "c"
+                }
+            },
+            {
+                "from": "node3",
+                "to": "node4",
+                "type": "->",
+                "attr": {
+                    "length": 170,
+                    "fontSize": 12,
+                    "label": "d"
+                }
             },
-            "nodes": {
-                "6": {
-                    "id": "6",
-                    "attr": {
-                        "shape": "circle"
-                    }
-                },
-                "node1": {
-                    "id": "node1",
-                    "attr": {
-                        "shape": "doublecircle"
-                    }
-                },
-                "node2": {
-                    "id": "node2",
-                    "attr": {
-                        "shape": "doublecircle"
-                    }
-                },
-                "node3": {
-                    "id": "node3",
-                    "attr": {
-                        "shape": "doublecircle"
-                    }
-                },
-                "node4": {
-                    "id": "node4",
-                    "attr": {
-                        "shape": "diamond",
-                        "color": "red"
-                    }
-                },
-                "node5": {
-                    "id": "node5",
-                    "attr": {
-                        "shape": "square",
-                        "color": "blue",
-                        "width": 3
-                    }
+            {
+                "from": "node4",
+                "to": "node5",
+                "type": "->",
+                "attr": {
+                    "length": 170,
+                    "fontSize": 12
                 }
             },
-            "edges": [
-                {
-                    "from": "node1",
-                    "to": "node1",
-                    "type": "->",
-                    "attr": {
-                        "length": 170,
-                        "fontSize": 12,
-                        "label": "a"
-                    }
-                },
-                {
-                    "from": "node2",
-                    "to": "node3",
-                    "type": "->",
-                    "attr": {
-                        "length": 170,
-                        "fontSize": 12,
-                        "label": "b"
-                    }
-                },
-                {
-                    "from": "node1",
-                    "to": "node4",
-                    "type": "--",
-                    "attr": {
-                        "length": 170,
-                        "fontSize": 12,
-                        "label": "c"
-                    }
-                },
-                {
-                    "from": "node3",
-                    "to": "node4",
-                    "type": "->",
-                    "attr": {
-                        "length": 170,
-                        "fontSize": 12,
-                        "label": "d"
-                    }
-                },
-                {
-                    "from": "node4",
-                    "to": "node5",
-                    "type": "->",
-                    "attr": {
-                        "length": 170,
-                        "fontSize": 12
-                    }
-                },
-                {
-                    "from": "node5",
-                    "to": "6",
-                    "type": "->",
-                    "attr": {
-                        "length": 170,
-                        "fontSize": 12
-                    }
+            {
+                "from": "node5",
+                "to": 6,
+                "type": "->",
+                "attr": {
+                    "length": 170,
+                    "fontSize": 12
                 }
-            ]
-        }
-    );
+            }
+        ]
+    });
 });
 

vis.js

@@ -6911,6 +6911,37 @@ Timeline.prototype.getItemRange = function getItemRange() {
         return a;
     }
 
+    /**
+     * Set a value in an object, where the provided parameter name can be a
+     * path with nested parameters. For example:
+     *
+     *     var obj = {a: 2};
+     *     setValue(obj, 'b.c', 3);     // obj = {a: 2, b: {c: 3}}
+     *
+     * @param {Object} obj
+     * @param {String} path  A parameter name or dot-separated parameter path,
+     *                      like "color.highlight.border".
+     * @param {*} value
+     */
+    function setValue(obj, path, value) {
+        var keys = path.split('.');
+        var o = obj;
+        while (keys.length) {
+            var key = keys.shift();
+            if (keys.length) {
+                // this isn't the end point
+                if (!o[key]) {
+                    o[key] = {};
+                }
+                o = o[key];
+            }
+            else {
+                // this is the end point
+                o[key] = value;
+            }
+        }
+    }
+
     /**
      * Add a node to the current graph object. If there is already a node with
      * the same id, their attributes will be merged.
@@ -7277,7 +7308,7 @@ Timeline.prototype.getItemRange = function getItemRange() {
                     throw newSyntaxError('Attribute value expected');
                 }
                 var value = token;
-                attr[name] = value;
+                setValue(attr, name, value); // name can be a path
 
                 getToken();
                 if (token ==',') {