networkD3 forceNetwork: how to change legend text colour, text label colour, and bring text label to the front?

Question

I am trying to make some adjustments to a network graph plotted using networkd3 forcenetwork in R.

In particular, I would like to change the text label colour to black (or white, for black background) and bring the text labels to the front of the nodes. The standard option makes it really difficult to read the text labels as some labels are too light in colour, while others are obstructed by dense clusters of nodes.

It would be nice if I can change the legend text colour too, so that I can have the flexibility to change the background colour.

One possible solution as pointed out in this post here, is to hijack some unused parameters.

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;}'))

However, with no knowledge in JS, I have no idea how to write it or whether it is even possible.

Answer 1

You can add custom CSS to set the background color, color the legend text, and color the node label text using the htmltools package. Changing the z-order of the text labels would be much more complicated because you have to reorder elements inside the SVG, and I'm not sure that would even be worth it.

library(networkD3)
library(htmltools)

browsable(
  tagList(
    tags$head(
      tags$style('
        body{background-color: #DAE3F9 !important}
        .nodetext{fill: #000000}
        .legend text{fill: #FF0000}
      ')
    ),
    forceNetwork(Links = MisLinks, Nodes = MisNodes,
                 Source = "source", Target = "target",
                 Value = "value", NodeID = "name",
                 Group = "group", opacityNoHover = 1, 
                 fontSize = 12, legend = T, zoom = T)
  )
)