Merge pull request #82 from timelyportfolio/feature/margins

more robust margin control for diagonalNetwork and radialNetwork

Author: timelyportfolio

R/diagonalNetwork.R

@@ -17,8 +17,12 @@
 #' be before they are clicked. Multiple formats supported (e.g. hexadecimal).
 #' @param opacity numeric value of the proportion opaque you would like the
 #' graph elements to be.
-#' @param margin integer value of the plot margin. Set the margin
-#' appropriately to accomodate long text labels.
+#' @param margin an integer or a named \code{list}/\code{vector} of integers
+#' for the plot margins. If using a named \code{list}/\code{vector},
+#' the positions \code{top}, \code{right}, \code{bottom}, \code{left}
+#' are valid.  If a single integer is provided, then the value will be
+#' assigned to the right margin. Set the margin appropriately
+#' to accomodate long text labels.
 #'
 #'
 #' @examples
@@ -94,12 +98,14 @@ diagonalNetwork <- function(
                           nodeStroke = "steelblue",
                           textColour = "#111",
                           opacity = 0.9,
-                          margin = 0)
+                          margin = NULL)
 {
     # validate input
     if (!is.list(List))
       stop("List must be a list object.")
     root <- List
+    
+    margin <- margin_handler(margin)
 
     # create options
     options = list(

R/radialNetwork.R

@@ -17,8 +17,12 @@
 #' be before they are clicked. Multiple formats supported (e.g. hexadecimal).
 #' @param opacity numeric value of the proportion opaque you would like the
 #' graph elements to be.
-#' @param margin integer value of the plot margin. Set the margin
-#' appropriately to accomodate long text labels.
+#' @param margin an integer or a named \code{list}/\code{vector} of integers
+#' for the plot margins. If using a named \code{list}/\code{vector},
+#' the positions \code{top}, \code{right}, \code{bottom}, \code{left}
+#' are valid.  If a single integer is provided, then the value will be
+#' assigned to the right margin. Set the margin appropriately
+#' to accomodate long text labels.
 #'
 #'
 #' @examples
@@ -94,12 +98,14 @@ radialNetwork <- function(
                           nodeStroke = "steelblue",
                           textColour = "#111",
                           opacity = 0.9,
-                          margin = 0)
+                          margin = NULL)
 {
     # validate input
     if (!is.list(List))
       stop("List must be a list object.")
     root <- List
+    
+    margin <- margin_handler(margin)
 
     # create options
     options = list(

R/utils.R

@@ -59,3 +59,42 @@ toJSONarray <- function(dtf){
 read_file <- function(doc, ...){
   paste(readLines(doc, ...), collapse = '\n')
 }
+
+
+#' Utility function to handle margins
+#' @param margin an \code{integer}, a named \code{vector} of integers,
+#'    or a named \code{list} of integers specifying the margins
+#'    (top, right, bottom, and left)
+#'    in \code{px}/\code{pixels} for our htmlwidget.  If only a single
+#'    \code{integer} is provided, then the value will be assumed to be 
+#'    the \code{right} margin.
+#' @return named \code{list} with top, right, bottom, left margins
+#' @noRd
+margin_handler <- function(margin){
+  # margin can be either a single value or a list with any of
+  #    top, right, bottom, left
+  # if margin is a single value, then we will stick
+  #    with the original behavior of networkD3 and use it for the right margin
+  if(!is.null(margin) && length(margin) == 1 && is.null(names(margin))){
+    margin <- list(
+      top = NULL,
+      right = margin,
+      bottom = NULL,
+      left = NULL
+    )
+  } else if(!is.null(margin)){
+    # if margin is a named vector then convert to list
+    if(!is.list(margin) && !is.null(names(margin))){
+      margin <- as.list(margin)
+    }
+    # if we are here then margin should be a list and
+    #   we will use the values supplied with NULL as default
+    margin <- modifyList(
+      list(top = NULL, right = NULL, bottom = NULL, left = NULL),
+      margin
+    )
+  } else {
+    # if margin is null, then make it a list of nulls for each position
+    margin <- list(top = NULL, right = NULL, bottom = NULL, left = NULL)
+  } 
+}

inst/htmlwidgets/diagonalNetwork.js

@@ -34,9 +34,21 @@ HTMLWidgets.widget({
 
     var s = d3.select(el).selectAll("svg");
 
-    s.attr("margin", x.options.margin);
-    var margin = {top: 20, right: 20 + parseInt(s.attr("margin")), bottom: 20, 
-      left: 20};
+    // margin handling
+    //   set our default margin to be 20
+    //   will override with x.options.margin if provided
+    var margin = {top: 20, right: 20, bottom: 20, left: 20};
+    //   go through each key of x.options.margin
+    //   use this value if provided from the R side
+    Object.keys(x.options.margin).map(function(ky){
+      if(x.options.margin[ky] !== null) {
+        margin[ky] = x.options.margin[ky];
+      }
+      // set the margin on the svg with css style
+      s.style(["margin",ky].join("-"), margin[ky]);
+    });
+      
+    
     width = s.attr("width") - margin.right - margin.left;
     height = s.attr("height") - margin.top - margin.bottom;
 

inst/htmlwidgets/radialNetwork.js

@@ -32,9 +32,27 @@ HTMLWidgets.widget({
     // JSON array with the d3Tree root data
 
     var s = d3.select(el).selectAll("svg");
-    var diameter = Math.min(parseInt(s.attr("width")),parseInt(s.attr("height")));
-    s.attr("margin", x.options.margin);
-    tree.size([360, diameter/2 - parseInt(s.attr("margin"))])
+
+    // margin handling
+    //   set our default margin to be 20
+    //   will override with x.options.margin if provided
+    var margin = {top: 20, right: 20, bottom: 20, left: 20};
+    //   go through each key of x.options.margin
+    //   use this value if provided from the R side
+    Object.keys(x.options.margin).map(function(ky){
+      if(x.options.margin[ky] !== null) {
+        margin[ky] = x.options.margin[ky];
+      }
+      // set the margin on the svg with css style
+      s.style(["margin",ky].join("-"), margin[ky]);
+    });
+
+    var diameter = Math.min(
+      parseInt(s.attr("width")) - margin.right - margin.left,
+      parseInt(s.attr("height")) - margin.top - margin.bottom
+    );
+
+    tree.size([360, diameter/2])
         .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
 
     // select the svg group element and remove existing children