1

I have long(ish) node labels for my Sankey diagram that I would like to rotate so that they can be read top-to-bottom instead of left-to-right. Ideally, I would be able to place these rotated node labels directly over the nodes (rather than the edges). Is there anything like the 'srt' option in base R plots?Sankey Diagram with node-labels in need of rotation

CJ Yetman
  • 8,373
  • 2
  • 24
  • 56
CharismaticChromoFauna
  • 55
  • 1
  • 8

1 Answers1

3

You could add JavaScript to the HTMLWidgets to change certain text attributes/styles...

library(networkD3)
library(htmlwidgets)

links <- data.frame(
  src = c(0, 0, 0, 1, 1, 1, 2, 2, 2),
  target = c(3, 4, 5, 3, 4, 5, 3, 4, 5),
  value = 1
)

nodes <- data.frame(name = paste0("node", 1:6))

sn <- sankeyNetwork(
  Links = links,
  Nodes = nodes,
  Source = 'src',
  Target = 'target',
  Value = 'value',
  NodeID = 'name',
  fontSize = 16,
  width = 600,
  height = 300,
  margin = list("left" = 100)
)

sn <- onRender(
  sn,
  '
  function(el,x) {
    d3.select(el)
      .selectAll(".node text")
      .attr("text-anchor", "middle")
      .style("writing-mode", "vertical-rl")
      .style("text-orientation", "upright");
  }
  '
)

sn

enter image description here

CJ Yetman
  • 8,373
  • 2
  • 24
  • 56
  • Brilliant suggestion, thanks for the demonstration! I'm trying to rotate the whole label and I've almost got it via (` .style("writing-mode", "vertical-lr") .style("text-orientation", "sideways")`, but I cannot figure out how to get it to read from bottom-to-top (where the 'bottom' of the letters are facing the right). Thanks again CJ! – CharismaticChromoFauna Jan 21 '21 at 19:23
  • you'd have to mess around with transform and rotate styles/attributes, which unfortunately is more difficult than it sounds because you have to know/set where the origin of the transform is.... but otherwise it would work the same... you can apply any CSS or SVG styles or attributes this way – CJ Yetman Jan 21 '21 at 23:20