Adjust Background Picture And Title For Plot From Networkd3's Forcenetwork

Following the post here, Change the color of the legend text in forceNetwork for networkD3, I am trying to add a picture from a local drive as the background image, and also add a

Solution 1:

Here's a reproducible example that adds a title, styles the title, styles the legend text, changes the background color, and attempts to set a background image with a local file. (I can't test the background image because it depends on a number of specific factors, but it may work for you.)...

library(networkD3)
library(htmlwidgets)

subNodes <- 
  read.table(stringsAsFactors = FALSE, header = TRUE, text = "
             nodeName nodeGroup     nodeSize
             Bob      NorthAmerica  10
             Alice    NorthAmerica  10
             Tom      China         10
             John     Japan         10
             ")

subLinkList <-
  read.table(stringsAsFactors = FALSE, header = TRUE, text = "
             root  children  linkValue
             0     1         1
             0     2         1
             0     3         1
             ")

network <- forceNetwork(Links = subLinkList, Nodes = subNodes,
                        Source = "root", Target = "children",
                        Value = "linkValue", NodeID = "nodeName",
                        Group = "nodeGroup", 
                        opacity = 1, Nodesize = "nodeSize",
                        legend = TRUE)

network <- htmlwidgets::prependContent(network, htmltools::tags$h1("Title"))

network <- htmlwidgets::onRender(
  network,
  'function(el, x) { 
    d3.selectAll(".legend text").style("fill", "white");
    d3.select("body").style("background-color", "#144370");
    d3.select("h1").style("color", "red").style("font-family", "sans-serif");
    d3.select("body")
      .style("background-image", "url(file://C:\\Desktop\\BGP.png)")
      .style("background-repeat", "no-repeat")
      .style("background-position", "right bottom");
  }'
)


saveNetwork(network, "~/Desktop/forceNetwork.html", selfcontained = TRUE)