Uncaught TypeError: Cannot read property 'cluster' of undefined #13

jiansongatnih · 2018-01-20T15:09:19Z

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!

garthtarr · 2018-01-20T20:49:34Z

This is one where @timelyportfolio or @ramnathv might be able to help

timelyportfolio · 2018-01-21T13:59:35Z

Without a reproducible example, not much I can do unfortunately.

jiansongatnih · 2018-01-21T16:52:09Z

Thank you @garthtarr. I added 'd3r' and 'htmlwidgets', but they did not solve my problem.

garthtarr · 2018-01-21T21:28:40Z

@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)

jiansongatnih · 2018-01-22T00:22:38Z

@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)

jiansongatnih · 2018-01-22T00:38:15Z

Thank you @garthtarr!
If I comment out all 'networkD3' codes, the igraph created by 'edgebundleR' will show up.

garthtarr · 2018-01-22T01:18:08Z

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.

jiansongatnih · 2018-01-23T21:23:57Z

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)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uncaught TypeError: Cannot read property 'cluster' of undefined #13

Uncaught TypeError: Cannot read property 'cluster' of undefined #13

jiansongatnih commented Jan 20, 2018

garthtarr commented Jan 20, 2018

timelyportfolio commented Jan 21, 2018

jiansongatnih commented Jan 21, 2018

garthtarr commented Jan 21, 2018

jiansongatnih commented Jan 22, 2018

jiansongatnih commented Jan 22, 2018

garthtarr commented Jan 22, 2018

jiansongatnih commented Jan 23, 2018

Uncaught TypeError: Cannot read property 'cluster' of undefined #13

Uncaught TypeError: Cannot read property 'cluster' of undefined #13

Comments

jiansongatnih commented Jan 20, 2018

garthtarr commented Jan 20, 2018

timelyportfolio commented Jan 21, 2018

jiansongatnih commented Jan 21, 2018

garthtarr commented Jan 21, 2018

jiansongatnih commented Jan 22, 2018

jiansongatnih commented Jan 22, 2018

garthtarr commented Jan 22, 2018

jiansongatnih commented Jan 23, 2018