Directed arrows for Sankey Network

DESCRIPTION

@@ -35,4 +35,4 @@ Suggests:
     tibble
 Enhances: knitr, shiny
 LazyData: true
-RoxygenNote: 6.0.1
+RoxygenNote: 7.1.1

R/sankeyNetwork.R

@@ -41,6 +41,7 @@
 #' browser on the client so don't push it too high.
 #' @param sinksRight boolean. If \code{TRUE}, the last nodes are moved to the
 #' right border of the plot.
+#' @param arrows logical value to enable directional link arrows.
 #'
 #' @examples
 #' \dontrun{
@@ -76,7 +77,8 @@ sankeyNetwork <- function(Links, Nodes, Source, Target, Value,
     NodeID, NodeGroup = NodeID, LinkGroup = NULL, units = "",
     colourScale = JS("d3.scaleOrdinal(d3.schemeCategory20);"), fontSize = 7,
     fontFamily = NULL, nodeWidth = 15, nodePadding = 10, margin = NULL,
-    height = NULL, width = NULL, iterations = 32, sinksRight = TRUE)
+    height = NULL, width = NULL, iterations = 32, sinksRight = TRUE,
+    arrows=FALSE)
 {
     # Check if data is zero indexed
     check_zero(Links[, Source], Links[, Target])
@@ -132,7 +134,8 @@ sankeyNetwork <- function(Links, Nodes, Source, Target, Value,
     options = list(NodeID = NodeID, NodeGroup = NodeGroup, LinkGroup = LinkGroup,
         colourScale = colourScale, fontSize = fontSize, fontFamily = fontFamily,
         nodeWidth = nodeWidth, nodePadding = nodePadding, units = units,
-        margin = margin, iterations = iterations, sinksRight = sinksRight)
+        margin = margin, iterations = iterations, sinksRight = sinksRight,
+        arrows = arrows)
 
     # create widget
     htmlwidgets::createWidget(name = "sankeyNetwork", x = list(links = LinksDF,

inst/htmlwidgets/sankeyNetwork.js

@@ -121,7 +121,7 @@ HTMLWidgets.widget({
         var path = sankey.link();
 
         // draw links
-        var link = svg.selectAll(".link")
+        var link = svg.selectAll(".node")
             .data(links)
             .enter().append("path")
             .attr("class", "link")
@@ -140,6 +140,8 @@ HTMLWidgets.widget({
                 .style("stroke-opacity", opacity_link);
             });
 
+
+
         // add backwards class to cycles
         link.classed('backwards', function (d) { return d.target.x < d.source.x; });
 
@@ -173,6 +175,30 @@ HTMLWidgets.widget({
             .html(function(d) { return "<pre>" + d.source.name + " \u2192 " + d.target.name +
                 "\n" + format(d.value) + " " + options.units + "</pre>"; });
 
+	if (options.arrows) {
+      	link.style("marker-end",  function(d) { return "url(#arrow-" + d.key + ")"; });
+
+      var linkColoursArr = d3.nest().key(function(d) { return d.colour; }).entries(links);
+
+      node.selectAll(".link")
+          .data(linkColoursArr)
+          .enter().append("marker")
+            .attr("id", function(d) { return "arrow-" + d.key; })
+            .attr("viewBox", "0, -5, 10, 10")
+            .attr("refX", 10)
+            .attr("refY", 0)
+            .attr("preserveAspectRatio", "xMaxYMin meet")
+            .attr("Width", sankey.nodeWidth())
+            .attr("markerHeight", 1)
+            .attr("orient", "auto-start-reverse")
+	    //.attr("transform", "skewY(40)")
+            .style("fill", "context-fill")
+            //.style("fill", function(d) { return d.key; })
+            .style("opacity", 0.5)
+          .append("path")
+            .attr("d", "M0,-5 L10,0 L0,5");
+    }		
+
         node.append("rect")
             .attr("height", function(d) { return d.dy; })
             .attr("width", sankey.nodeWidth())