Add styles and edge markers

src/index.html

@@ -2,13 +2,21 @@
 <meta charset="utf-8">
 <style>
     body {
+        background: antiquewhite;
         font-family: "Inconsolata";
     }
     circle {
-        fill: aquamarine;
+        fill: coral;
+        stroke: grey;
+        stroke-width: 2px;
+    }
+    text {
+        fill: slategrey;
+        font-size: 20px;
     }
     line {
-        stroke: blueviolet;
+        stroke: slategrey;
     }
 </style>
-<svg width="960" height="600"></svg>
\ No newline at end of file
+<svg width="960" height="600">
+</svg>
\ No newline at end of file

src/js/visualizer/visualizer.js

@@ -12,13 +12,25 @@ export class Visualizer {
         var svg = d3.select("svg");
         var width = +svg.attr("width");
         var height = +svg.attr("height");
-
+        svg.append("svg:defs").selectAll("marker")
+            .data(["end"])
+            .enter().append("svg:marker")
+            .attr("id", String)
+            .attr("viewBox", "0 -5 10 10")
+            .attr("refX", 13)
+            .attr("refY", 0)
+            .attr("markerWidth", 13)
+            .attr("markerHeight", 13)
+            .attr("orient", "auto")
+            .attr('xoverflow','visible')
+            .append("svg:path")
+            .attr("d", "M0,-5L10,0L0,5");
         var simulation = d3.forceSimulation()
             .force("link", d3.forceLink().id(function (d) {
                 return d.id;
             }))
             .force('charge', d3.forceManyBody()
-                .strength(0)
+                .strength(0.5)
                 .theta(1)
                 .distanceMax(10)
             )
@@ -55,7 +67,8 @@ export class Visualizer {
             .selectAll("line")
             .data(graph.edges)
             .enter()
-            .append("line");
+            .append("line")
+            .attr("marker-end", "url(#end)");
 
         var node = svg.append("g")
             .attr("class", "nodes")
@@ -102,14 +115,12 @@ export class Visualizer {
                 });
 
             node
-                .attr("r", 10)
-                .style("stroke", "#424242")
-                .style("stroke-width", "2px")
+                .attr("r", 5)
                 .attr("cx", function (d) {
-                    return d.x + 3;
+                    return d.x;
                 })
                 .attr("cy", function (d) {
-                    return d.y - 3;
+                    return d.y;
                 });
 
             label
@@ -118,8 +129,7 @@ export class Visualizer {
                 })
                 .attr("y", function (d) {
                     return d.y;
-                })
-                .style("font-size", "10px").style("fill", "#333");
+                });
         }
     }