rich-iannone / DiagrammeR

Graph and network visualization using tabular data in R
https://rich-iannone.github.io/DiagrammeR/
Other
1.7k stars 248 forks source link

Hyperlinks in DiagrammeR charts #271

Open charliejhadley opened 6 years ago

charliejhadley commented 6 years ago

I'm struggling to find a way to embed a hyperlink into a DiagrammeR output. I've tried using the following approaches without success:

I created a SO question here: https://stackoverflow.com/q/48792355/1659890

For completeness, I've pasted the content of the question below. I hope you don't mind me using your Issues log in this way, please do close if you find it inappropriate. Thanks for making DiagrammeR!

Mermaid

Using DiagrammeR(diagram = "", type = "mermaid") it's possible to use HTML tags in the node labels:

library("DiagrammeR")
DiagrammeR("graph TB;
           A{Is your data public?} -- yes -->C;
           A -- no -->B[<center><b>Oxshef: dataviz</b> only supports researchers <br> in the creation of interactive data visualisations that public</center>];
           C{<center>Please make it public?</center>};
           D[<center>Supported!</center>];
           E[<center>Unsupported!</center>];
           F[Refer to our tutorial];
           C -- yes -->D;
           C -- no -->E;
           C -- I don't know -->F")

enter image description here

But to use the <a> tag we need to use an = which the parser vomits over:

DiagrammeR("graph TB;
           A{Is your data public?} -- yes -->C;
           A -- no -->B[<center><b>Oxshef: dataviz</b> only supports researchers <br> in the creation of interactive data visualisations that public</center>];
           C{<center>Please make it public?</center>};
           D[<center>Supported!</center>];
           E[<center>Unsupported!</center>];
           F[Refer to our <a href='http://google.com'>tutorial</a>];
           C -- yes -->D;
           C -- no -->E;
           C -- I don't know -->F")

enter image description here

grViz

Here's the same flowchart as above but with all html stripped out and converted to grViz:

grViz("
digraph boxes_and_circles {

      # a 'graph' statement
      graph [overlap = true, fontsize = 10]

      # several 'node' statements
      node [shape = box,
      fontname = Helvetica]
      A [label = 'Is your data public?']; B [label = 'Please make it public']; 
      C [label = 'Tech Question']; D [label = 'Supported' ]; 
      E [label = 'Unsupported!']; F [label = 'Refer to our tutorial']

      # several 'edge' statements
      A->B A->C C->D [label = 'yes'] C->E [label = 'no'] C->F [label = 'Unknown']
      }
      ")

This doesn't support HTML tags:

grViz("
digraph boxes_and_circles {

      # a 'graph' statement
      graph [overlap = true, fontsize = 10]

      # several 'node' statements
      node [shape = box,
      fontname = Helvetica]
      A [label = 'Is your data public?']; B [label = '<b>Please</b> make it public']; 
      C [label = 'Tech Question']; D [label = 'Supported' ]; 
      E [label = 'Unsupported!']; F [label = 'Refer to our tutorial']

      # several 'edge' statements
      A->B A->C C->D [label = 'yes'] C->E [label = 'no'] C->F [label = 'Unknown']
      }
      ")

enter image description here

create_graph

DiagrammeR also lets us create graph as follows:

ndf_no_tags <- create_node_df(n = 6,
                              label = c("Is your data public?",
                                        "Please make it public",
                                        "Tech Question",
                                        "Supported",
                                        "Unsupported",
                                        "Refer to our tutorial"))
# Create an edge data frame (edf)
edf <- create_edge_df(from = c(1, 1, 3, 3, 3),
                      to = c(2, 3, 4, 5, 6))
ndf_no_tags %>%
  create_graph(edges_df = edf) %>%
  render_graph()

But it escapes HTML tags:

ndf_with_tags <- create_node_df(n = 6,
                              label = c("Is your data public?",
                                        "<b>Please</b> make it public",
                                        "Tech Question",
                                        "Supported",
                                        "Unsupported",
                                        "Refer to our tutorial"))
ndf_with_tags %>%
  create_graph(edges_df = edf) %>%
  render_graph()

enter image description here

jasonhenderson commented 6 years ago

Did you figure something out here? Seems like this is pretty useful.

charliejhadley commented 6 years ago

Unfortunately not, I’d happily take recommendations but also aware that I might just need to write this natively rather than via the htmlwidget.

charlie86 commented 6 years ago

I'd also find this super useful! Awesome package nonetheless.

lewkrr commented 6 years ago

I figured it out for the mermaid function:

mermaid(' graph LR A-->B A-->C C-->E B-->D C-->D D-->F E-->F click B "http://www.github.com" "This is a link" ')

the click B <link> option requires double quotes, and thankfully R accepts single quotes for the entire mermaid code block.