"chorddiag" won't draw together with a "collapsibleTree" in a shiny app

shiny
1

I have an issue while using the chorddiag and the collapsibleTree packages in the same shiny app.
Here is a minimal example. The chord Diagram will not draw, except if I comment out the line collapsibleTreeOutput("tree"). Note that the two graphs use D3.js

Thank you for your help...

library(shiny)
library(chorddiag)
library(collapsibleTree)

ui <-   fluidPage(
  h5("a chordDiagram should be here"),
  chorddiag::chorddiagOutput("chordDiagram"),
  h5("a collapsibleTree should be here"),
# The chord diagram will appear if I comment out the following line
  collapsibleTree::collapsibleTreeOutput("tree"),
  hr()  
)
server <- function(input, output) {
  output$chordDiagram <- renderChorddiag({  
    m <- matrix(1:9, nrow = 3, ncol = 3)
    row.names(m) <- colnames(m) <- c("a", "b","c")
    chorddiag::chorddiag(m)    
  })  
  output$tree <- renderCollapsibleTree(
    collapsibleTree::collapsibleTree(warpbreaks, c("wool", "tension"))
  )  
}
shinyApp(ui, server)

I am using
‘collapsibleTree’ version 0.1.7
‘shiny’ version 1.1.0
‘chorddiag’ version 0.1.2 (devtools::install_github("mattflor/chorddiag"))
R version 3.5.0

My Firefox console reads:

TypeError: d3.layout is undefined[Learn More] chorddiag.js:12:5

TypeError: chord is undefined[Learn More] chorddiag.js:22:5

1 Like
2

Any answer to this? I am having the same issue when using chorddiag with sankeydiagram from networkD3.

3

The chorddiag and collapsibleTree are likely using different versions of D3 which are incompatible, and htmlwidgets will only load one version (the latest?) of a JavaScript library at a time. This is a common occurrence when using packages that use D3v3 and D3v4.

1 Like
4

Thank you for the explanation. I did install the latest versions of both chorddiag and networkD3. Not sure how I can force them to use the latest version of D3. Any ideas?

5

The packages themselves, or at least the JavaScript they contain, likely cannot use a different version of D3, which is why they’re not working in your case... so even if you could force the package to load a different version of D3 it still wouldn’t work. Essentially, that is what htmlwidgets is doing.

Possibly, you could modify a version of the D3v3 library so that it loads in a different namespace and rename it to trick htmlwidgets into loading it alongside D3v4, then fork the package that uses D3v3 and modify its JavaScript so that it uses the customized namespace you created in the customized D3v3 library.

Or you could lobby the package maintainer to update to D3v4 (or v5).