Change background color of networkD3 plot

Question

Say I make a networkD3 plot - using the minimal example in the package

#
library(networkD3)

# Load data
data(MisLinks)
data(MisNodes)

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

If I open this in the browser, I can use developer tools to change the background color of body to e.g. background-color: #DAE3F9;"

Is there a way to automatically define background color of a plot (From default white) to another color, without opening in the browser ? Basically, can we add CSS directly to the code like we can add JS functions?

score 5 · Answer 1 · answered Mar 28 '16 at 02:59

If possible, we can use some help from htmltools in a couple ways.

library(networkD3)

# Load data
data(MisLinks)
data(MisNodes)

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

library(htmltools)

# don't like using the !important modifier
#  but without script not sure there is another way
#  to override the default white background
browsable(
  tagList(
    tags$head(
      tags$style('body{background-color: #DAE3F9 !important}')
    ),
    forceNetwork(Links = MisLinks, Nodes = MisNodes,
                 Source = "source", Target = "target",
                 Value = "value", NodeID = "name",
                 Group = "group", opacity = 0.8)
  )
)

# if you want to limit the background-color to
#  the htmlwidget, we could wrap in tags$div
browsable(
  tags$div(
    style = "background-color:#DAE3F9;",
    forceNetwork(Links = MisLinks, Nodes = MisNodes,
                 Source = "source", Target = "target",
                 Value = "value", NodeID = "name",
                 Group = "group", opacity = 0.8)
  )
)

# if you are ok with script then we
#  we could do something like this
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.backgroundColor = "#DAE3F9"
'      
    )
  )
)

Jota · Accepted Answer · 2016-03-23T02:34:04.833

1

Here's my hack at it. It's not pretty, but I added a function in the linkDistance argument to do the dirty work. Hopefully, someone will come along eventually with a less kludgy solution:

forceNetwork(Links = MisLinks, Nodes = MisNodes,
  Source = "source", Target = "target",
  Value = "value", NodeID = "name",
  Group = "group", opacity = 0.8,
  linkDistance = 
    JS('function(){d3.select("body").style("background-color", "#DAE3F9"); return 50;}'))

Another, similarly unappealing option would be to add a clickAction argument (e.g. clickAction = 'd3.select("body").style("background-color", "#DAE3F9")'), but that would only change the background if a user clicks a node.

edited Mar 23 '16 at 02:34

answered Mar 21 '16 at 17:23

Jota

17,281
7
63
93

ha! That's a very neat/funny way of doing it - it never occurred to hijack another parameter. I think it works ok - but maybe there is a better way. I'm trying to think if this would have any unwanted side-effects, but seems to work ok. – jalapic Mar 21 '16 at 17:43
2

@jalapic I got creative! Not sure about side-effects. FWIW, maybe a better way will be implemented directly if this feature request about changing the background color is implemented: https://github.com/christophergandrud/networkD3/issues/106 – Jota Mar 21 '16 at 17:48

Change background color of networkD3 plot

2 Answers2

Linked