first working version

example/index.html

@@ -23,8 +23,7 @@
   </style>
   <svg width="960" height="600"></svg>
   <script src="https://d3js.org/d3.v4.min.js"></script>
-  <script src="/grammar/dot.js"></script>
-  <script src="/d3-dot-graph.js"></script>
+  <script src="../build/d3-dot-graph.js"></script>
   <script>
 
 var line = d3.line()
@@ -52,7 +51,7 @@
     .attr("id", String)
     .attr("viewBox", "0 -5 10 10")
     .attr("refX", 15)
-    .attr("refY", -1.5)
+    .attr("refY", -0.5)
     .attr("markerWidth", 6)
     .attr("markerHeight", 6)
     .attr("orient", "auto")
@@ -102,10 +101,17 @@
         .radius(function(d) { return d.y; });
 
     function ticked() {
-      path.attr("d",
-      (d)=>linkGen(d))
-      //(d) => line([[d.source.x, d.source.y], [d.target.x, d.target.y]]));
-
+      path.attr("d", function(d) {
+    var dx = d.target.x - d.source.x,
+        dy = d.target.y - d.source.y,
+        dr = Math.sqrt(dx * dx + dy * dy);
+    return "M" +
+        d.source.x + "," +
+        d.source.y + "A" +
+        dr + "," + dr + " 0 0,1 " +
+        d.target.x + "," +
+        d.target.y;
+});
           node
               .attr("transform", function(d) {
         	    return "translate(" + d.x + "," + d.y + ")"; });

grammar/dot.pegjs

@@ -0,0 +1,173 @@
+// Simplified DOT grammar
+//
+// Not supported (yet):
+//
+//  * HTML IDs
+
+{
+  function merge(a, b, key) {
+
+    function x(a) {
+        a.forEach(function (b) {
+            if (!(b[key] in obj)) {
+                obj[b[key]] = obj[b[key]] || {};
+                array.push(obj[b[key]]);
+            }
+            Object.keys(b).forEach(function (k) {
+                obj[b[key]][k] = b[k];
+            });
+        });
+    }
+
+    var array = [],
+        obj = {};
+
+    x(a);
+    x(b);
+    return array;
+  }
+
+  var directed;
+}
+
+start
+  = graphStmt+
+
+graphStmt
+  = _* strict:(strict _)? type:graphType _* id:(id)? _* '{' _* stmts:stmtList? _* '}' _* {
+      return {type: type, id: id, strict: strict !== null, stmts: stmts};
+    }
+
+stmtList
+  = first:stmt _* ';'? rest:(_* inner:stmt _* ';'?)* {
+      var result = [first];
+      for (var i = 0; i < rest.length; ++i) {
+        result.push(rest[i][1]);
+      }
+      return result;
+    }
+
+stmt
+  = attrStmt
+  / edgeStmt
+  / subgraphStmt
+  / inlineAttrStmt
+  / nodeStmt
+
+attrStmt
+  = type:(graph / node /edge) _* attrs:attrList {
+      return { type: "attr", attrType: type, attrs: attrs || {}};
+    }
+
+inlineAttrStmt
+  = k:id _* '=' _* v:id {
+      var attrs = {};
+      attrs[k] = v;
+      return { type: "inlineAttr", attrs: attrs };
+    }
+
+nodeStmt
+  = id:nodeId _* attrs:attrList? { return {type: "node", id: id, attrs: attrs || {}}; }
+
+edgeStmt
+  = lhs:(nodeIdOrSubgraph) _* rhs:edgeRHS _* attrs:attrList? {
+      var elems = [lhs];
+      for (var i = 0; i < rhs.length; ++i) {
+        elems.push(rhs[i]);
+      }
+      return { type: "edge", elems: elems, attrs: attrs || {} };
+    }
+
+subgraphStmt
+  = id:(subgraph _* (id _*)?)? '{' _* stmts:stmtList? _* '}' {
+      id = (id && id[2]) || [];
+      return { type: "subgraph", id: id[0], stmts: stmts };
+    }
+
+attrList
+  = first:attrListBlock rest:(_* attrListBlock)* {
+      var result = first;
+      for (var i = 0; i < rest.length; ++i) {
+        merge(result, rest[i][1]);
+      }
+      return result;
+    }
+
+attrListBlock
+  = '[' _* aList:aList? _* ']' { return aList; }
+
+aList
+  = first:idDef rest:(_* ','? _* idDef)* {
+      var result = first;
+      for (var i = 0; i < rest.length; ++i) {
+        _.merge(result, rest[i][3]);
+      }
+      return result;
+    }
+
+edgeRHS
+  = ("--" !{ return directed; } / "->" &{ return directed; }) _* rhs:(nodeIdOrSubgraph) _* rest:edgeRHS? {
+      var result = [rhs];
+      if (rest) {
+        for (var i = 0; i < rest.length; ++i) {
+          result.push(rest[i]);
+        }
+      }
+      return result;
+    }
+
+idDef
+  = k:id v:(_* '=' _* id)? {
+      var result = {};
+      result[k] = v[3];
+      return result;
+    }
+
+nodeIdOrSubgraph
+  = subgraphStmt
+  / id:nodeId { return { type: "node", id: id, attrs: {} }; }
+
+nodeId
+  = id:id _* port? { return id; }
+
+port
+  = ':' _* id _* (':' _* compassPt)?
+
+compassPt
+  = "ne" / "se" / "sw" / "nw" / "n" / "e" / "s" / "w" / "c" / "_"
+
+id "identifier"
+  = fst:[a-zA-Z\u0200-\u0377_] rest:[a-zA-Z\u0200-\u0377_0-9]* { return fst + rest.join(""); }
+  / sign:'-'? dot:'.' after:[0-9]+ {
+      return (sign || "") + dot + after.join("");
+    }
+  / sign:'-'? before:[0-9]+ after:('.' [0-9]*)? {
+      return (sign || "") + before.join("") + (after ? after[0] : "") + (after ? after[1].join("") : "");
+    }
+  / '"' id:("\\\"" { return '"'; } / "\\" ch:[^"] { return "\\" + ch; }  / [^"])* '"' {
+      return id.join("");
+    }
+
+node = k:"node"i { return k.toLowerCase(); }
+edge = k:"edge"i { return k.toLowerCase(); }
+graph = k:"graph"i { return k.toLowerCase(); }
+digraph = k:"digraph"i { return k.toLowerCase(); }
+subgraph = k:"subgraph"i { return k.toLowerCase(); }
+strict = k:"strict"i { return k.toLowerCase(); }
+
+graphType
+  = graph:graph / graph:digraph {
+      directed = graph === "digraph";
+      return graph;
+    }
+
+whitespace "whitespace"
+  = [ \t\r\n]+
+
+comment "comment"
+  = "//" ([^\n])*
+  / "/*" (!"*/" .)* "*/"
+
+_
+  = whitespace
+  / comment

package.json

@@ -5,17 +5,17 @@
   "main": "index.js",
   "scripts": {
     "test": "mocha test/*.js",
-    "build": "pegjs --format globals --export-var d3dot grammar/dot.pegjs ",
+    "build": "pegjs --format globals --export-var d3dotparser1 --output src/dot-parser.js grammar/dot.pegjs; rollup -c",
+    "prepublish": "rollup -c && uglifyjs build/d3-dot-graph.js -c negate_iife=false -m -o build/d3-dot-graph.min.js",
     "start": "npm run build"
   },
-  ,
   "keywords": [
     "dot",
     "graphviz",
     "d3",
     "graph"
   ],
-    "repository": {
+  "repository": {
     "type": "git",
     "url": "git+https://github.com/gmamaladze/d3-dot-graph.git"
   },
@@ -25,5 +25,9 @@
     "url": "https://github.com/gmamaladze/d3-dot-graph/issues"
   },
   "homepage": "https://github.com/gmamaladze/d3-dot-graph#readme",
-  "dependencies": {}
+  "dependencies": {
+    "pegjs": "^0.10.0",
+    "rollup": "^0.49.2",
+    "rollup-watch": "^4.3.1"
+  }
 }

rollup.config.js

@@ -0,0 +1,9 @@
+export default {
+    input: "src/index.js",
+    name: "d3dot",
+    context: "window",
+    output: {
+      format: "umd",
+      file: "build/d3-dot-graph.js"
+    }
+};