Update to D3 v4 to combine netword3D and mermaid in Rmarkdown

[ekstroem]

This is essentially a repost of this question on Stack Overflow which I also raised as an issue with the htmlwidgets package.

I would like to include two htmlwidgets in the same Rmarkdown document - a mermaid flowchart from the DiagrammeR package and a network3D graph. If I include both in my document then none of them renders but if I only include one of them then it will be rendered.

Here's a minimal example in Rmarkdown that shows the problem

---
title: "Untitled"
author: "Me"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## The grViz always works

```{r dia1, echo=FALSE}
library(DiagrammeR)
grViz("
  digraph {
    layout = twopi
    A -> {B C D}
  }")
```

# From here onwards I can only include one of the two graphs 

```{r}
mermaid("
graph LR
    A-->B
")
```

# Plot

```{r}
library(networkD3)
Source <- c("A", "A", "A", "A", "B", "B", "C", "C", "D")
Target <- c("B", "C", "D", "J", "E", "F", "G", "H", "I")
NetworkData <- data.frame(Source, Target)

# Create graph
simpleNetwork(NetworkData)
```

If I add multiple DiagrammeR graphs based on grViz then all is fine and dandy. Also if I leave out the mermaid plot then I'll see the remaining two. Are they not supposed to play together nicely? I've tried to swap the ordering of the library calls to no avail.

ramnath told me that

networkD3 uses D3 v 4, while diagrammeR uses D3 v 3. D3 v 4 introduced a lot of breaking
changes in the API. This is the reason these two widgets are not playing nicely. You can ping the author of diagrammeR to see if he can update it to using D3 v 4.

so ... any plans for upgrading to D3 v4?

[rich-iannone]

@ekstroem This is a great idea and so I'll definitely prioritize this. Thanks for submitting this issue!

[ekstroem]

Sounds great. Anything I can do to help (not really knowing D3 but quite well versed in R) ?

[rich-iannone]

@ekstroem This is entirely optional but would be very helpful (and is a good skill to learn if you haven't tried it): fork the repo, update D3 (location is inst/htmlwidgets/lib/d3), build, and then test. If your R Markdown example works (and tests pass), submit as a pull request.

This is a lot of work so I do understand there might not be time for it... but even the part before the PR would be helpful (were you'd just report that it works or not). Thanks!

[ekstroem]

Quick update. I updated the D3 files to v4 and had the following results: The grViz graphs were still showing normally, but mermaid graphs are empty - even if the document only contains mermaid graphs.

If I run the test battery from DiagrammeR using devtools::test() then I get the following

Failed -------------------------------------------------------------------------

1. Failure: graph actions can be triggered to modify the graph (@test-graph_actions.R#242)
   create_graph() %>% trigger_graph_actions() showed 0 warnings

I think the problem might be with ´mermaid` itself. Not sure if that has migrated to D3 v4 yet.

[dmurdoch]

A quick and dirty workaround is to keep D3 version 3, but rename it, as done here: https://github.com/dmurdoch/chorddiag and https://github.com/dmurdoch/d3heatmap .