Javascript R中的networkD3在Chrome、Firefox中显示不正确,但在Safari中显示正确?

Javascript R中的networkD3在Chrome、Firefox中显示不正确,但在Safari中显示正确?,javascript,css,r,shiny,networkd3,Javascript,Css,R,Shiny,Networkd3,以下是应用程序代码: require(shiny) require(shinydashboard) require(igraph) require(networkD3) ui = dashboardPage( dashboardHeader(title = "Test App"), dashboardSidebar(sidebarMenu(id = "tab",style = "position:fixed;",

以下是应用程序代码:

require(shiny)
require(shinydashboard)
require(igraph)
require(networkD3)

ui = dashboardPage(
  dashboardHeader(title = "Test App"),
  dashboardSidebar(sidebarMenu(id = "tab",style = "position:fixed;",
                               menuItem("Networks", tabName = "nets", icon=icon("project-diagram"))
  )),
  dashboardBody(
    tags$script(HTML("$('body').addClass('fixed');")),
    tabItems(
      tabItem(tabName="nets", width=12,
              h2("Networks", align="center"),
              fluidRow(
                box(width = 12 ,title = "Network Display", status="info", solidHeader = TRUE, align="left",height="930px", collapsible=FALSE,
                    div(radioButtons(inputId = "RangeChoice",label = "Choose range of nodes:",
                                           choices = c("Few", "Some", "All"),selected = "Few"),style="display:center-align"),
                    forceNetworkOutput(outputId = "ptNetwork",height = "600px")) # box Network Display
              ) # fluidRow
      ) # tabItem nets
    ) # tabItems
  ) # dashboardBody
) # dashboardPage

server = function(input, output, session) {
  observeEvent(input$tab, {
    print(sprintf("%s tab is selected.", input$tab))
    if (input$tab == "nets") {
      # draw network
      output$ptNetwork=renderForceNetwork({
        x = matrix(rnorm(100*100), nrow=100, ncol=100)
        colnames(x) = 1:100
        ig = graph.adjacency(adjmatrix = x, mode="undirected", weighted=TRUE, add.colnames = list(attr="name"))
        mets=sample(V(ig)$name, 10)
        zmets=sample(V(ig)$name, 50)
        if ( input$RangeChoice == "Few"){
          e = delete.vertices(ig, v=V(ig)$name[-which(V(ig)$name %in% mets)])
          e = delete.vertices(e, V(e)[degree(e) == 0] )
        }else if(input$RangeChoice == "Some"){
          e = delete.vertices(ig, v=V(ig)$name[-which(V(ig)$name %in% zmets)])
          e = delete.vertices(e, V(e)[degree(e) == 0] )
        }else if(input$RangeChoice == "All"){
          e = ig
        }else{
          print("No Range Selected")
        }
        # assign groups and make ColourScale
        node_first = V(e)$name  %in% mets
        node_second = V(e)$name  %in% zmets
        node_both = node_first & node_second
        group=rep("Neither",length(V(e)$name))
        for (l in 1:length(V(e)$name)) {
          if (node_both[l]) { group[l] = "Both" } else if (node_first[l]) { group[l] = "First" } else if (node_second[l]) { group[l] = "Second" } else { group[l] = "Neither" }
        }
        names(group)=V(e)$name
        ColourScale <- 'd3.scaleOrdinal().domain(["First", "Second", "Both","Neither"]).range(["7554A3", "96C93C", "ECB602","#d3d3d3"]);'
        borderColor = rep("#d3d3d3",length(V(e)$name))
        #generate networkd3
        net_p=igraph_to_networkD3(e)
        net_p$nodes$group=sapply(as.character(net_p$nodes$name),function(x) group[x])
        net_p$nodes$nodesize=rep(1, length(net_p$nodes$name))
        linkColor_first=net_p$nodes$name[net_p$links$source+1] %in% mets & net_p$nodes$name[net_p$links$target+1] %in% mets
        linkColor_second=net_p$nodes$name[net_p$links$source+1] %in% zmets & net_p$nodes$name[net_p$links$target+1] %in% zmets
        linkColor_both = linkColor_first & linkColor_second
        linkColor = rep("lightgrey", length(linkColor_first))
        for (l in 1:length(linkColor)) {
          if (linkColor_both[l]) {
            linkColor[l] = "ECB602"
          } else if (linkColor_first[l]) {
            linkColor[l] = "7554A3"
          } else if (linkColor_second[l]) {
            linkColor[l] = "96C93C"
          } else {
            linkColor[l] = "lightgrey"
          }
        }
        net_p$links$color=linkColor
        
        ptNetwork=forceNetwork(Nodes = net_p$nodes, charge = -90, fontSize = 20, colourScale = JS(ColourScale),
                               Links = net_p$links,
                               linkColour = net_p$links$color,
                               Nodesize = 'nodesize',
                               Source = 'source', Target = 'target',NodeID = 'name',Group = 'group',Value = "value",zoom = T,
                               opacity = 0.9,
                               legend = T)
        ptNetwork
      })
    }  else {
      print("No tab selected")
    }
  })
}

shinyApp(ui, server)
require(闪亮)
要求(仪表板)
需要(igraph)
需要(网络3)
ui=仪表板页面(
仪表板标题(title=“测试应用程序”),
仪表板侧栏(侧栏菜单(id=“tab”,style=“position:fixed;”,
菜单项(“网络”,tabName=“网络”,icon=icon(“项目图”))
)),
仪表板主体(
标记$script(HTML(“$('body').addClass('fixed');”)),
tabItems(
tabItem(tabName=“nets”,宽度=12,
h2(“网络”,align=“中心”),
fluidRow(
框(宽度=12,title=“网络显示”,status=“info”,solidHeader=TRUE,align=“left”,height=“930px”,可折叠=FALSE,
div(单选按钮(inputId=“RangeChoice”,label=“选择节点范围:”,
choices=c(“少数”、“部分”、“全部”)、selected=“少数”)、style=“display:center align”),
forceNetworkOutput(outputId=“ptNetwork”,height=“600px”)#方框网络显示
)#fluidRow
)#选项卡项网络
)#选项卡项
)#仪表板主体
)#仪表板页面
服务器=功能(输入、输出、会话){
observeEvent(输入$tab{
打印(sprintf(“%s选项卡已选中。”,输入$tab))
如果(输入$tab==“网络”){
#绘制网络
输出$ptNetwork=renderForceNetwork({
x=矩阵(rnorm(100*100),nrow=100,ncol=100)
colnames(x)=1:100
ig=图.邻接(邻接矩阵=x,mode=“无向”,weighted=TRUE,add.colnames=list(attr=“name”))
mets=样本(V(ig)$名称,10)
zmets=样本(V(ig)$name,50)
如果(输入$RangeSchoice==“很少”){
e=delete.vertices(ig,v=v(ig)$name[-哪个(v(ig)$name%在%mets中)])
e=删除。顶点(e,V(e)[度数(e)==0])
}else if(输入$RangeChoice==“Some”){
e=delete.vertices(ig,v=v(ig)$name[-哪个(v(ig)$name%在%zmets中)])
e=删除。顶点(e,V(e)[度数(e)==0])
}else if(输入$RangeSchoice==“全部”){
e=ig
}否则{
打印(“未选择范围”)
}
#分配组并制作颜色比例
节点_first=V(e)$name%在%mets中
node_second=V(e)$name%在%zmets中
node_both=第一个node_和第二个node_
组=代表(“两者”,长度(V(e)$name))
适用于(1:l长度(V(e)$名称)){
if(node_both[l]){group[l]=“both”}else if(node_first[l]){group[l]=“first”}else if(node_second[l]){group[l]=“second”}else{group[l]=“none”}
}
名称(组)=V(e)$name

colorscale错误在于,为colorscale和linkColor指定的所有十六进制都需要在十六进制代码之前有一个哈希:

ColourScale <- 'd3.scaleOrdinal().domain(["First", "Second", "Both","Neither"]).range(["#7554A3", "#96C93C", "#ECB602","#d3d3d3"]);'

...
...
...

if (linkColor_both[l]) {
  linkColor[l] = "#ECB602"
} else if (linkColor_first[l]) {
  linkColor[l] = "#7554A3"
} else if (linkColor_second[l]) {
  linkColor[l] = "#96C93C"
} else {
  linkColor[l] = "lightgrey"
}
色标