changing background image within forceNetwork

Question

Changing the background color of a networkD3 can be achieved by hijacking some arguments of the forceNetwork function as @Jota demonstrated here : Change background color of networkD3 plot.

How would this be extrapolated to changing the background image ?

I have tried few ways without success one of them as follows :

library(networkD3)
library(htmltools)

data(MisLinks)
data(MisNodes)

browsable(
  tagList(
         forceNetwork(Links = MisLinks, Nodes = MisNodes,
             Source = "source", Target = "target",
             Value = "value", NodeID = "name",
             Group = "group", opacity = 0.8),
      tags$script('document.body.style.backgroundImage = "url(paper.gif)"')
    )
   )

Is there a way to alter the background-image in a similar manner as follows :
linkDistance = JS('function(){d3.select("body").style("background-color", "#910e33"); return 50;}')) ?

CJ Yetman · Accepted Answer · 2017-08-23T09:22:58.367

3

You have to fully specify the URL. For instance, this seems to work...

library(networkD3)
library(htmltools)

data(MisLinks)
data(MisNodes)

browsable(
  tagList(
    forceNetwork(Links = MisLinks, Nodes = MisNodes,
                 Source = "source", Target = "target",
                 Value = "value", NodeID = "name",
                 Group = "group", opacity = 0.8),
    tags$script('document.body.style.backgroundImage = "url(https://media.giphy.com/media/dgrEGTo4uk22Y/giphy.gif)"')
  )
)

this is another way to do it without using htmltools...

library(networkD3)

data(MisLinks)
data(MisNodes)

linkJS <- JS('
  function(){
    d3.select("body")
      .style("background-image", "url(https://media.giphy.com/media/dgrEGTo4uk22Y/giphy.gif)")
      .style("background-repeat", "no-repeat")
      .style("background-position", "right bottom");
    return 50;
  }')

forceNetwork(Links = MisLinks, Nodes = MisNodes, Source = "source", 
             Target = "target", Value = "value", NodeID = "name",
             Group = "group", opacity = 0.8, linkDistance = linkJS)

edited Aug 23 '17 at 09:22

answered Aug 03 '17 at 22:19

CJ Yetman

8,373
2
24
56

Any way one can use the arguments like click Action or LinkDistance like this: linkDistance = JS('function(){d3.select("body").style("background-color", "#910e33"); return 50;}')) ? – R noob Aug 06 '17 at 16:49
1

Probably, if you specify the full path to the image. Have you tried it? – CJ Yetman Aug 06 '17 at 18:02
does this only work with url or it can also work with locally saved files ? – R noob Aug 15 '17 at 12:44
Please disregard above comment: the code below works linkJS <- JS('function(){d3.select("body").style("background-image", "url(file:///C:/Users/John/Desktop/john.jpg)"); return 50;}'), – R noob Aug 15 '17 at 13:30
1

Yup, as long as you use the full (and valid) path, as you’ve already figured out. :-) – CJ Yetman Aug 15 '17 at 13:50
any idea how to align the image ? for example at the right bottom corner and without repeat. – R noob Aug 18 '17 at 08:32
Open a new question... StackOverflow discourages long comment threads, especially when they deviate from the original question – CJ Yetman Aug 18 '17 at 08:34
1

edited the non-htmltools code above to not repeat the background image and move it to the bottom right corner – CJ Yetman Aug 23 '17 at 09:23

changing background image within forceNetwork

1 Answers1