border each node in a network created using networkD3::forceNetwork() with a specific color

Question

Consider the following network, can nodes be bordered with colors based on a column from the MisNodes data frame using the forceNetwork function in networkd3. It has an option to color the edges but not the node borders.

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)

CJ Yetman CJ Yetman · Accepted Answer · 2020-02-21T01:47:43

Assuming your nodes data frame has a column with valid color values in it, you can prepend custom JavaScript to set the node border colors with it...

library(networkD3)
library(htmlwidgets)

# Load data
data(MisLinks)
data(MisNodes)

MisNodes$border <- c(rep("#F00", 20), rep("#0F0", 20), rep("#00F", 20), rep("#F00", 17))


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


# add the color column back in to the data in the htmlwidget because
# forceNetwork only passes through the necessary columns
fn$x$nodes$border <- MisNodes$border


# add custom JavaScript to set the node stroke to the color in the border column
fn <- htmlwidgets::onRender(fn, 
  'function(el, x) { d3.selectAll("circle").style("stroke", d => d.border); }')


# display
fn

border each node in a network created using networkD3::forceNetwork() with a specific color

1 Answers