Mercurial > hg > NetworkVis

changeset 30:cccbcc845d54

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add arrowheads to commentary chains.
author casties
date Fri, 11 Dec 2015 13:03:04 -0500
parents 2564732249b3
children a6b2a09ea413
files ismi-python-neo4jrestclient/static/commentaries_authors2.html
diffstat 1 files changed, 24 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/ismi-python-neo4jrestclient/static/commentaries_authors2.html	Thu Dec 10 16:00:49 2015 -0500
+++ b/ismi-python-neo4jrestclient/static/commentaries_authors2.html	Fri Dec 11 13:03:04 2015 -0500
@@ -100,7 +100,8 @@
     .node.TEXT { fill: #888; }
     .node.TEXT.marked { stroke: red; }
     .node.TEXT.selected { fill: red; }
-    .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
+    .link { stroke: #999; stroke-opacity: .6; stroke-width: 2px; }
+    .arrowHead { fill: #999 }
     tr.marked {border: 2px solid red;}
 </style>
 
@@ -187,13 +188,30 @@
 
     var force = d3.layout.force()
             .charge(-100) // -200
-            .linkDistance(15) // 30
+            .linkDistance(20) // 30
             .size([width, height]);
 
     var svg = d3.select("#graph").append("svg")
             .attr("width", "1400px").attr("height", "1400px")
             .attr("pointer-events", "all");
 
+    // arrow head marker
+    var defs = svg.append("defs").append("marker")
+                .attr({
+                    "id":"arrow",
+                    "markerUnits": "strokeWidth",
+                    "viewBox":"0 -5 10 10",
+                    "refX": 20, // 5
+                    "refY":0,
+                    "markerWidth":4,
+                    "markerHeight":4,
+                    "orient":"auto"
+                })
+                .append("path")
+                    .attr("d", "M0,-5 L10,0 L0,5")
+                    .attr("class","arrowHead");
+
+    // load graph
     d3.json(backendApiPrefix+"/graph?limit=1000", function(error, graph) {
 		if (error) return;
 		
@@ -201,7 +219,10 @@
 
         var link = svg.selectAll(".link")
                 .data(graph.links).enter()
-                .append("line").attr("class", "link");
+                .append("line").attr({
+                    "class": "link",
+                    "marker-end": "url(#arrow)"
+                    });
 
         var node = svg.selectAll(".node")
                 .data(graph.nodes).enter()