edgebundleR
edgebundleR copied to clipboard
garthtarr
Uncaught TypeError: Cannot read property 'cluster' of undefined
edgebundleR worked fine by itself in my ShinyApp, but I could not display a D3 network generated by networkD3. No error in my ShinyApp, but got the following javascript error in my browser. Apparently there is a conflict between edgebundleR and networkD3. I want to display my network in both on two different tabs. I would greatly appreciate it if you could help me to find a solution!
Uncaught TypeError: Cannot read property 'cluster' of undefined edgebundleR.js:30
at Object.drawGraphic (http://127.0.0.1:6080/edgebundleR-binding-0.1.4/edgebundleR.js:30:29)
at Object.renderValue (http://127.0.0.1:6080/edgebundleR-binding-0.1.4/edgebundleR.js:12:10)
at exports.OutputBinding.shinyBinding.renderValue (http://127.0.0.1:6080/htmlwidgets-0.9/htmlwidgets.js:516:20)
at exports.OutputBinding.onValueChange (http://127.0.0.1:6080/shared/shiny.min.js:4:9871)
at exports.OutputBinding.delegator.(anonymous function) [as onValueChange] (http://127.0.0.1:6080/htmlwidgets-0.9/htmlwidgets.js:112:23)
at OutputBindingAdapter.onValueChange (http://127.0.0.1:6080/shared/shiny.min.js:4:29679)
at ShinyApp.receiveOutput (http://127.0.0.1:6080/shared/shiny.min.js:3:26802)
at ShinyApp.
Thank you @garthtarr. I added 'd3r' and 'htmlwidgets', but they did not solve my problem.
@jiansongatnih could you provide a reproducible example filling in the app.R script below (where I've put ##)?
library(edgebundleR)
library(shiny)
library(networkD3)
server <- function(input, output) {
##
}
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
##
),
mainPanel(
tabsetPanel(
tabPanel("edgebundle",
##
),
tabPanel("d3network",
##
)
)
)
)
)
shinyApp(ui = ui, server = server)
@garthtarr I really appreciate your help on this! I was thinking about how to provide you an example to show what's my problem. It gave me the same javascript error as I notice with my app in a browser (Chrome).
library(edgebundleR)
library(shiny)
library(networkD3)
data(MisLinks)
data(MisNodes)
server <- function(session, input, output) {
## Build igraph
d <- structure(list(ID = c("KP1009", "GP3040", "KP1757", "GP2243",
"KP682", "KP1789", "KP1933", "KP1662", "KP1718", "GP3339", "GP4007",
"GP3398", "GP6720", "KP808", "KP1154", "KP748", "GP4263", "GP1132",
"GP5881", "GP6291", "KP1004", "KP1998", "GP4123", "GP5930", "KP1070",
"KP905", "KP579", "KP1100", "KP587", "GP913", "GP4864", "KP1513",
"GP5979", "KP730", "KP1412", "KP615", "KP1315", "KP993", "GP1521",
"KP1034", "KP651", "GP2876", "GP4715", "GP5056", "GP555", "GP408",
"GP4217", "GP641"),
Type = c("B", "A", "B", "A", "B", "B", "B",
"B", "B", "A", "A", "A", "A", "B", "B", "B", "A", "A", "A", "A",
"B", "B", "A", "A", "B", "B", "B", "B", "B", "A", "A", "B", "A",
"B", "B", "B", "B", "B", "A", "B", "B", "A", "A", "A", "A", "A",
"A", "A"),
Set = c(15L, 1L, 10L, 21L, 5L, 9L, 12L, 15L, 16L,
19L, 22L, 3L, 12L, 22L, 15L, 25L, 10L, 25L, 12L, 3L, 10L, 8L,
8L, 20L, 20L, 19L, 25L, 15L, 6L, 21L, 9L, 5L, 24L, 9L, 20L, 5L,
2L, 2L, 11L, 9L, 16L, 10L, 21L, 4L, 1L, 8L, 5L, 11L),
Loc = c(3L, 2L, 3L, 1L, 3L, 3L, 3L, 1L, 2L,
1L, 3L, 1L, 1L, 2L, 2L, 1L, 3L,
2L, 2L, 2L, 3L, 2L, 3L, 2L, 1L, 3L, 3L, 3L, 2L, 3L, 1L, 3L, 3L,
1L, 3L, 2L, 3L, 1L, 1L, 1L, 2L, 3L, 3L, 3L, 2L, 2L, 3L, 3L)),
.Names = c("ID", "Type", "Set", "Loc"), class = "data.frame",
row.names = c(NA, -48L))
# let's add Loc to our ID
d$key <- d$ID
d$ID <- paste0(d$Loc,".",d$ID)
# Get vertex relationships
sets <- unique(d$Set[duplicated(d$Set)])
rel <- vector("list", length(sets))
for (i in 1:length(sets)) {
rel[[i]] <- as.data.frame(t(combn(subset(d, d$Set ==sets[i])$ID, 2)))
}
rel <- rbindlist(rel)
# Get the graph
g <- graph.data.frame(rel, directed=F, vertices=d)
clr <- as.factor(V(g)$Loc)
levels(clr) <- c("salmon", "wheat", "lightskyblue")
V(g)$color <- as.character(clr)
V(g)$size = degree(g)*5
# igraph static plot
# plot(g, layout = layout.circle, vertex.label=NA)
observeEvent(input$goButton1, {
output$igraph <- renderEdgebundle({
edgebundle(g, tension = 0.8, fontsize = 8)
})
updateTabsetPanel(session, "inTabset", selected = "igraph")
})
## Build D3 network
observeEvent(input$goButton2, {
output$d3network <- renderForceNetwork({
forceNetwork(Links = MisLinks, Nodes = MisNodes, Source = "source", Target = "target", Value = "value", NodeID = "name", Group = "group", opacity = 0.4, zoom = TRUE)
})
updateTabsetPanel(session, "inTabset", selected = "d3network")
})
}
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
actionButton("goButton1", "Display network with EdgebundleR"),
actionButton("goButton2", " Dispaly network with networkD3")
),
mainPanel(
tabsetPanel(id = "inTabset",
tabPanel("edgebundle",
edgebundleOutput("igraph", width = "100%", height = "600px")
),
tabPanel("d3network",
forceNetworkOutput("d3network", width = "100%", height = "700px")
)
)
)
)
)
shinyApp(ui = ui, server = server)
Thank you @garthtarr! If I comment out all 'networkD3' codes, the igraph created by 'edgebundleR' will show up.
Thanks for the reprex @jiansongatnih I see the issue. Unfortunately, there's no quick fix, an option might be to use an iframe ramnathv/htmlwidgets#58
As @timelyportfolio mentions here #12 ,
guessing d3v3 from edgebundler conflicting with d3v4 from networkD3. See christophergandrud/networkD3#162 for discussion but no resolution.
I guess I should move edgebundleR to d3v4, but then it looks like we'd have a similar issue with other htmlwidgets that were still using d3v3.
Thank you @garthtarr! Followed your suggestion, I was able to display my igraph in iframe. But I had to save the igraph to a html file and move the file to 'www' folder in Shiny. Again thanks!
library(edgebundleR)
library(shiny)
library(networkD3)
library(igraph)
data(MisLinks)
data(MisNodes)
server <- function(session, input, output) {
## Build igraph
d <- structure(list(ID = c("KP1009", "GP3040", "KP1757", "GP2243",
"KP682", "KP1789", "KP1933", "KP1662", "KP1718", "GP3339", "GP4007",
"GP3398", "GP6720", "KP808", "KP1154", "KP748", "GP4263", "GP1132",
"GP5881", "GP6291", "KP1004", "KP1998", "GP4123", "GP5930", "KP1070",
"KP905", "KP579", "KP1100", "KP587", "GP913", "GP4864", "KP1513",
"GP5979", "KP730", "KP1412", "KP615", "KP1315", "KP993", "GP1521",
"KP1034", "KP651", "GP2876", "GP4715", "GP5056", "GP555", "GP408",
"GP4217", "GP641"),
Type = c("B", "A", "B", "A", "B", "B", "B",
"B", "B", "A", "A", "A", "A", "B", "B", "B", "A", "A", "A", "A",
"B", "B", "A", "A", "B", "B", "B", "B", "B", "A", "A", "B", "A",
"B", "B", "B", "B", "B", "A", "B", "B", "A", "A", "A", "A", "A",
"A", "A"),
Set = c(15L, 1L, 10L, 21L, 5L, 9L, 12L, 15L, 16L,
19L, 22L, 3L, 12L, 22L, 15L, 25L, 10L, 25L, 12L, 3L, 10L, 8L,
8L, 20L, 20L, 19L, 25L, 15L, 6L, 21L, 9L, 5L, 24L, 9L, 20L, 5L,
2L, 2L, 11L, 9L, 16L, 10L, 21L, 4L, 1L, 8L, 5L, 11L),
Loc = c(3L, 2L, 3L, 1L, 3L, 3L, 3L, 1L, 2L,
1L, 3L, 1L, 1L, 2L, 2L, 1L, 3L,
2L, 2L, 2L, 3L, 2L, 3L, 2L, 1L, 3L, 3L, 3L, 2L, 3L, 1L, 3L, 3L,
1L, 3L, 2L, 3L, 1L, 1L, 1L, 2L, 3L, 3L, 3L, 2L, 2L, 3L, 3L)),
.Names = c("ID", "Type", "Set", "Loc"), class = "data.frame",
row.names = c(NA, -48L))
# let's add Loc to our ID
d$key <- d$ID
d$ID <- paste0(d$Loc,".",d$ID)
# Get vertex relationships
sets <- unique(d$Set[duplicated(d$Set)])
rel <- vector("list", length(sets))
for (i in 1:length(sets)) {
rel[[i]] <- as.data.frame(t(combn(subset(d, d$Set ==sets[i])$ID, 2)))
}
rel <- rbindlist(rel)
# Get the graph
g <- graph.data.frame(rel, directed=F, vertices=d)
clr <- as.factor(V(g)$Loc)
levels(clr) <- c("salmon", "wheat", "lightskyblue")
V(g)$color <- as.character(clr)
V(g)$size = degree(g)*5
myIgraph <- edgebundleR::edgebundle(g, tension = 0.8, fontsize = 8)
saveEdgebundle(myIgraph, "myIgraph.html", selfcontained = TRUE)
file.copy("myIgraph.html", "./www/myIgraph.html")
## Build D3 network
observeEvent(input$goButton1, {
output$d3network <- renderForceNetwork({
forceNetwork(Links = MisLinks, Nodes = MisNodes, Source = "source", Target = "target", Value = "value", NodeID = "name", Group = "group", opacity = 0.4, zoom = TRUE)
})
updateTabsetPanel(session, "inTabset", selected = "networkD3")
})
# observeEvent(input$goButton2, {
# output$igraph <- renderEdgebundle({
# edgebundle(g, tension = 0.8, fontsize = 8)
# })
#
# updateTabsetPanel(session, "inTabset", selected = "edgebundleR")
# })
observeEvent(input$goButton2, {
output$igraph <- renderUI({
tags$iframe(
seamless = "seamless",
src="myIgraph.html",
scrolling = 'no',
height=700,
width=700
)
})
updateTabsetPanel(session, "inTabset", selected = "edgebundleR")
})
}
ui <- fluidPage(theme = "triage.css",
sidebarLayout(
sidebarPanel(
actionButton("goButton1", " Dispaly network with networkD3"),
actionButton("goButton2", "Display network with EdgebundleR")
),
mainPanel(
tabsetPanel(id = "inTabset",
tabPanel("networkD3",
forceNetworkOutput("d3network", width = "100%", height = "700px")
),
# tabPanel("edgebundleR",
# edgebundleOutput("igraph", width = "100%", height = "600px")
# )
tabPanel("edgebundleR",
htmlOutput("igraph", width = "100%", height = "600px")
)
)
)
)
)
shinyApp(ui = ui, server = server)