Arrows on links add

Author: nikitaeverywhere

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iknow-entity-browser",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Visualizer for iKnow entities",
   "main": "gulpfile.babel.js",
   "scripts": {

src/static/index.html

@@ -15,7 +15,19 @@
         <i id="undoButton" class="ui icon-undo"></i>
         <i id="redoButton" class="ui icon-redo"></i>
     </div>
-    <svg id="graph"></svg>
+    <svg id="graph">
+        <defs>
+            <marker id="svgLineArrow-related" markerWidth="10" markerHeight="10" refX="7" refY="3" orient="auto" markerUnits="strokeWidth">
+                <path d="M0,0 L0,6 L9,3 z" fill="#ffb840"/>
+            </marker>
+            <marker id="svgLineArrow-similar" markerWidth="10" markerHeight="10" refX="7" refY="3" orient="auto" markerUnits="strokeWidth">
+                <path d="M0,0 L0,6 L9,3 z" fill="#7ca1ff"/>
+            </marker>
+            <marker id="svgLineArrow-other" markerWidth="10" markerHeight="10" refX="7" refY="3" orient="auto" markerUnits="strokeWidth">
+                <path d="M0,0 L0,6 L9,3 z" fill="#f00"/>
+            </marker>
+        </defs>
+    </svg>
     <div id="table">
         <i id="tableToggle" class="ui icon-list"></i>
         <div id="rightTopIcons">

src/static/js/graph/index.js

@@ -66,14 +66,19 @@ function newSimulation () {
         .on("tick", ticked);
 }
 
+const ARROW_FWD = 2;
+
 function ticked () {
     if (!link)
         return;
     link
-        .attr("x1", d => d.source.x)
-        .attr("y1", d => d.source.y)
-        .attr("x2", d => d.target.x)
-        .attr("y2", d => d.target.y);
+        .attr("x1", d => {
+            d.dir = Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x);
+            return d.source.x + Math.cos(d.dir) * d.source.radius;
+        })
+        .attr("y1", d => d.source.y + Math.sin(d.dir) * d.source.radius)
+        .attr("x2", d => d.target.x - Math.cos(d.dir) * (d.target.radius + ARROW_FWD))
+        .attr("y2", d => d.target.y - Math.sin(d.dir) *(d.target.radius + ARROW_FWD));
     node
         .attr("transform", (d) => `translate(${ d.x },${ d.y })`)
 }
@@ -206,7 +211,8 @@ export function update (g = lastGraph, reset = false) {
             : d.type === "related"
             ? "related"
             : "other"
-        );
+        )
+        .attr("marker-end", d => `url(#svgLineArrow-${ d.type })`);
     link = linkEnter.merge(link);
 
     node = nodes.selectAll(".node").data(graph.nodes, function (d) { return this._id || d.id; });