Embedding d3output in Shiny Dashboard

[apoorv2210]

I am working on some visualization using the r2d3 package and integrating the d3output on a Shiny Dashboard.

While I completed what I thought would be the difficult chunks of work, I am stuck at a rather trivial stage.

After generating the d3output, I am not able to restrict it inside a box within a dashboardPage - it is covering the complete width of the page (including sidebarPanel) and eclipsing the dashboard, while the box where it is declared to appear is displaying as an empty box.

Please let me know what I might be missing out on here. I have spent a lot of time on this but have not been able to crack this one.

Please find a snip of the dashboard to better understand the issue.

Here is how I'm writing the code:

library(shiny)
library(r2d3)
library(data.tree)


ui <- dashboardPage(
  
  ##========================== Dashboard Header ==========================##  
  
  dashboardHeader(title = 'R2D3 Dashboard',titleWidth = 280
                  # tags$li(class = "dropdown",
                  #         tags$a(tags$img(height = "20px", alt="Logo", src="logo.png", background = "white")))
  ),
  
  ##========================== Side Panel (Filters & Selections) ==========================##
  dashboardSidebar( width=280,
                    
                    sidebarMenu(
                      
                      menuItem(text=strong('Tree'),
                               newtab=FALSE,
                               icon=NULL,
                               tabName="tab_11",
                               startExpanded=TRUE
                      )
                    )
  ),
  
  dashboardBody(
    fluidPage(theme="style.css",
      

      verticalLayout(
        box(width=12,d3Output("d5"),value = TRUE)),
      
      verticalLayout(
        box(width=12,verbatimTextOutput("selected"),value = TRUE))
      
    )

  )
)

# ui <- dashboardPage(
#   titlePanel("R2D3 sample"),
#   sidebarLayout(
#     sidebarPanel(),
#     mainPanel(
#       verbatimTextOutput("selected"),
#       d3Output("d5")
#     )
#   )
# )

server <- function(input, output) {
  output$d5 <- renderD3({
    r2d3(
      NULL,
      script = "examples/tree.js", d3_version = 3,
      dependencies = "style.css"
    )
  })
  
  output$selected <- renderText({
    input$bar_clicked
  })
}

shinyApp(ui = ui, server = server)

Due to the confidential nature of the data, I can't share the supporting files. Pardon me for the partial content.

--
Thanks & Regards,
Apoorv Mehrotra

[mpkrass7]

I was having the same problem. I think if you add options(r2d3.shadow = FALSE) to your r2d3() call, you'll be able to render your viz in the correct place
https://rstudio.github.io/r2d3/reference/r2d3.html

Hope it helps!

[alptaciroglu]

I am experiencing the same issue. I tried @mpkrass7's options tip but did not do the trick for me. I would really appreciate any input.

I asked for help in this Github page with a minimally reproducible code attached.

nstrayer/js4shiny_r2d3#1 (comment)