来自Firefox中的sankeyNetwork（NetworkD3）的小图输出

时间：2018-07-03 01:03:53

标签： r firefox shiny htmlwidgets networkd3

对于每个对象，当在中使用中的sankeyNetwork()而不是在Chrome或RStudio中使用library(shiny) library(magrittr) library(shinydashboard) library(networkD3) labels = as.character(1:9) ui <- tagList( dashboardPage( dashboardHeader( title = "appName" ), ##### dasboardSidebar ##### dashboardSidebar( sidebarMenu( id = "sidebar", menuItem("plots", tabName = "sPlots") ) ), ##### dashboardBody ##### dashboardBody( tabItems( ##### tab ##### tabItem( tabName = "sPlots", tabsetPanel( tabPanel( "Sankey plot", fluidRow( box(title = "title", solidHeader = TRUE, collapsible = TRUE, status = "primary", sankeyNetworkOutput("sankeyHSM1") ) ) ) ) ) ) ) ) ) server <- function(input, output, session) { HSM = matrix(rep(c(10000, 700, 10000-700, 200, 500, 50, 20, 10, 2,40,10,10,10,10),4),ncol = 4) sankeyHSMNetworkFun = function(x,ndx) { nodes = data.frame("name" = factor(labels, levels = labels), "group" = as.character(c(1,2,2,3,3,4,4,4,4))) links = as.data.frame(matrix(byrow=T,ncol=3,c( 0, 1, NA, 0, 2, NA, 1, 3, NA, 1, 4, NA, 3, 5, NA, 3, 6, NA, 3, 7, NA, 3, 8, NA ))) links[,3] = HSM[2:(nrow(links)+1),] %>% {rowSums(.[,(ndx-1)*2+c(1,2)])} names(links) = c("source","target","value") sankeyNetwork(Links = links, Nodes = nodes, Source = "source", Target = "target", Value = "value", NodeID = "name",NodeGroup = "group", fontSize=12,sinksRight = FALSE) } output$sankeyHSM1 = renderSankeyNetwork({ sankeyHSMNetworkFun(values$HSM,1) }) } # Run the application shinyApp(ui = ui, server = server) 时，在Firefox中得到的图很小。

我在脚本中未包含任何CSS或JS-以下代码为我提供了此结果。

我错过了CSS属性吗？

我正在使用R 3.4.1，闪亮的1.1.0，networkD3 0.4和Firefox 52.9.0。

Firefox： Firefox

Chrome： Chrome 

onRender()

------------------编辑--------------------

感谢@CJYetman将library(shiny) library(magrittr) library(shinydashboard) library(networkD3) library(htmlwidgets) labels = as.character(1:9) ui <- tagList( tags$head( tags$script(' var dimension = [0, 0]; $(document).on("shiny:connected", function(e) { dimension[0] = window.innerWidth; dimension[1] = window.innerHeight; Shiny.onInputChange("dimension", dimension); }); $(window).resize(function(e) { dimension[0] = window.innerWidth; dimension[1] = window.innerHeight; Shiny.onInputChange("dimension", dimension); }); ') ), dashboardPage( dashboardHeader( title = "appName" ), ##### dasboardSidebar ##### dashboardSidebar( sidebarMenu( id = "sidebar", menuItem("plots", tabName = "sPlots") ) ), ##### dashboardBody ##### dashboardBody( tabItems( ##### tab ##### tabItem( tabName = "sPlots", tabsetPanel( tabPanel( "Sankey plot", fluidRow( box(title = "title", solidHeader = TRUE, collapsible = TRUE, status = "primary", sankeyNetworkOutput("sankeyHSM1") ), box(title = "plot2", solidHeader = TRUE, collapsible = TRUE, status = "primary", sankeyNetworkOutput("sankeyHSM2")) ) ) ) ) ) ) ) ) server <- function(input, output, session) { HSM = matrix(rep(c(10000, 700, 10000-700, 200, 500, 50, 20, 10, 2,40,10,10,10,10),4),ncol = 4) sankeyHSMNetworkFun = function(x,ndx) { nodes = data.frame("name" = factor(labels, levels = labels), "group" = as.character(c(1,2,2,3,3,4,4,4,4))) links = as.data.frame(matrix(byrow=T,ncol=3,c( 0, 1, NA, 0, 2, NA, 1, 3, NA, 1, 4, NA, 3, 5, NA, 3, 6, NA, 3, 7, NA, 3, 8, NA ))) links[,3] = HSM[2:(nrow(links)+1),] %>% {rowSums(.[,(ndx-1)*2+c(1,2)])} names(links) = c("source","target","value") sankeyNetwork(Links = links, Nodes = nodes, Source = "source", Target = "target", Value = "value", NodeID = "name",NodeGroup = "group", fontSize=12,sinksRight = FALSE) } output$sankeyHSM1 = renderSankeyNetwork({ req(input$dimension) sankeyHSMNetworkFun(values$HSM,1) %>% onRender('document.getElementsByTagName("svg")[0].setAttribute("viewBox", "")') }) output$sankeyHSM2 = renderSankeyNetwork({ req(input$dimension) sankeyHSMNetworkFun(values$HSM,2) %>% onRender('document.getElementsByTagName("svg")[0].setAttribute("viewBox", "")') }) } # Run the application shinyApp(ui = ui, server = server) 指示为可能的解决方案-但是，当像下面的MRE那样并排生成两个图时，此操作将失败（请注意，除了第二个sankey图外，我还添加了javascript代码，以便在窗口大小发生变化时重新绘制图形，因为绘制似乎不会自动进行。

document.getElementsByTagName("svg")[1].setAttribute("viewBox","")

------------------编辑2 --------------------

以上第二个问题已解决-通过使用document.getElementById("sankeyHSM2").getElementsByTagName("svg")[0].setAttribute("viewBox","")引用下面@CJYetman的注释来引用页面上的第二个svg项，或者使用def get_insert_string(class_reference): fields = [] arguments = [] for field in class_reference._meta.fields: if field.primary_key: pass elif field.help_text: fields.append('"%s"' % field.help_text) arguments.append('?') result = 'insert into %s ( %s ) values ( %s )' % ( class_reference.filemaker_table_name, u','.join(fields), u','.join(arguments)) return result 进入对象本身选择第一个svg元素

1 个答案:

答案 0 :(得分：7)

这似乎是Firefox对viewbox svg属性的反应不同于其他浏览器的结果。可能值得在https://github.com/christophergandrud/networkD3/issues

上将此问题提交

同时，您可以通过使用一些JavaScript和viewbox重置htmlwidgets::onRender()属性来解决此问题。这是使用示例最小化版本的示例。 （重置viewbox属性可能会导致其他后果）

library(htmlwidgets)
library(networkD3)
library(magrittr)

nodes = data.frame("name" = factor(as.character(1:9)),
                   "group" = as.character(c(1,2,2,3,3,4,4,4,4)))

links = as.data.frame(matrix(byrow = T, ncol = 3, c(
  0, 1, 1400,
  0, 2, 18600,
  1, 3, 400,
  1, 4, 1000,
  3, 5, 100,
  3, 6, 40,
  3, 7, 20,
  3, 8, 4
)))
names(links) = c("source","target","value")

sn <- sankeyNetwork(Links = links, Nodes = nodes, Source = "source", 
                    Target = "target", Value = "value", NodeID = "name", 
                    NodeGroup = "group", fontSize = 12, sinksRight = FALSE)

htmlwidgets::onRender(sn, 'document.getElementsByTagName("svg")[0].setAttribute("viewBox", "")')
相关问题
最新问题