CODEWITHSUNDEEP
rnetworkd3
Armando González Díaz
Armando González Díaz

Reputation: 752

Change color font of a Sankey Diagram with `networkD3`

I want to chanche color fonts, or add a shadow in font in order to improve visibility. However I haven't found a way to do it. One alternative is to use plotly, but when you put a plotly object in a shiny app and visualize it in a mobile phone, you lose interactive labels, so networkD3 shoes a better integration. The only problem is That I'm having dificulties to personalize appareance. I want to change font color.

A reprodutible example:

library(networkD3)
URL <- paste0('https://cdn.rawgit.com/christophergandrud/networkD3/',
              'master/JSONdata/energy.json')
energy <- jsonlite::fromJSON(URL)

# Plot
sankeyNetwork(Links = energy$links, Nodes = energy$nodes, Source = 'source',
              Target = 'target', Value = 'value', NodeID = 'name',
              units = 'TWh', fontSize = 12, nodeWidth = 30)

Upvotes: 0

Views: 2522

Answers (1)

dcruvolo
dcruvolo

Reputation: 669

The text elements can be modifying my adding an onRender script from the package htmlwidgets. This function allows you to run additional javascript functions for selecting and modifying elements using D3. The structure of the function is:

p <- onRender(myplot,'function(el, x){ 
    ...
}')

Using the example, you can select labels using d3.selectAll (this returns every element; use d3.select() for single element or the first element only).

// Sankey selector for node labels
d3.selectAll(".node text")

Modifying the color of a <text> element can be done using style('some prop', 'some value'). For example, let's say we want to change the text to blue.

d3.selectAll(".node text").style("fill", "blue") // or hex, rgb, hsl, etc.

Using your example above, here's how you could write it.

library(networkD3)
URL <- 'https://cdn.rawgit.com/christophergandrud/networkD3/master/JSONdata/energy.json'
energy <- jsonlite::fromJSON(URL)

# Plot
sankey <- sankeyNetwork(
  Links = energy$links, Nodes = energy$nodes, Source = 'source',
  Target = 'target', Value = 'value', NodeID = 'name',
  units = 'TWh', fontSize = 12, nodeWidth = 30
)

# render with js
sankey_rendered <- htmlwidgets::onRender(sankey,
  'function(el, x) {
    d3.selectAll(".node text")
        .style("fill", "blue");
  }'
)

# show
sankey_rendered

If you would like to do more with the labels (i.e., mouse events, clicks), assign the D3 select result to a variable. 

var labels = d3.selectAll(".node text");

Upvotes: 4

Related Questions