d3.js 更改TabsetPanel中的选项卡后，闪亮的渲染UI未显示不同的D3图

blmhpbnm  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(122)

我想做的

我正在尝试构建一个漂亮的应用程序，它使用标签集面板显示不同的交互式HTML图。它们都应该在renderUI的同一个调用中显示。如下面的示例所示，我的图基于d3框架（如networkD3和processanimateR包中所示）。

问题

不幸的是，renderUI只显示了生成的第一个图。一旦更改选项卡，第二个图就不会显示。processanimateR给我的错误是Failed to render the graph. It is probably too large. Original error: TypeError: d3.create is not a function at PATokens.insertTokens (<anonymous>:185:25) at <anonymous>:52:33 at <anonymous>:105:9。当然，图不会太大而无法显示（数据方面），因为更改Tab键序列可以完美地生成它。此行为与先显示哪个图无关。在下面的示例中，我标记了可以用来交换tab01和tab02的行，看看会发生什么。

我所尝试的

通过给出尽可能小的示例，我可能排除了许多错误来源。（每个选项卡一个）失败。问题仍然存在。正如这个最小的示例所示，这可能是d3在后台运行时出现的问题。可能是某些图形引擎无法在tab-变更或其他与js相关的事情。
我的问题
有没有一种方法可以在一个闪亮的应用程序中显示多个d3图，使它们都按预期显示？
先谢谢你！

我的例子


# XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# Settings

# XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# Packages

sapply(c("shiny","processanimateR","bupaR","networkD3"),require,character.only=T)

# data

x <- structure(list(
    activity = c(
        "action 1", "action 2", "action 3", 
        "action 5", "action 2", "action 3", "action 25", "action 26", 
        "action 2", "action 3", "action 1", "action 2", "action 3", "action 1", 
        "action 2", "action 3", "action 1", "action 2", "action 3", "action 5", 
        "action 2", "action 3", "action 25", "action 26", "action 2", 
        "action 3", "action 1", "action 2", "action 3", "action 1", "action 2", 
        "action 3"),
    id = c(494.18, 494.18, 494.18, 485.56, 485.56, 485.56, 
           413.99, 413.99, 413.99, 413.99, 439.49, 439.49, 439.49, 466.38, 
           466.38, 466.38, 494.18, 494.18, 494.18, 485.56, 485.56, 485.56, 
           413.99, 413.99, 413.99, 413.99, 439.49, 439.49, 439.49, 466.38, 
           466.38, 466.38), .order = 1:32,
    activity_instance_id_by_bupar = c(1L, 
                                      2L, 3L, 16L, 17L, 18L, 50L, 51L, 52L, 53L, 60L, 61L, 62L, 71L, 
                                      72L, 73L, 1L, 2L, 3L, 16L, 17L, 18L, 50L, 51L, 52L, 53L, 60L, 
                                      61L, 62L, 71L, 72L, 73L),
    lifecycle_id = c("start", "start", 
                     "start", "start", "start", "start", "start", "start", "start", 
                     "start", "start", "start", "start", "start", "start", "start", 
                     "complete", "complete", "complete", "complete", "complete", "complete", 
                     "complete", "complete", "complete", "complete", "complete", "complete", 
                     "complete", "complete", "complete", "complete"),
    timestamp = structure(c(1424304001, 
                            1377475201, 1516579201, 1384128001, 1375401601, 1397952001, 1328486401, 
                            1364688001, 1318032001, 1384905601, 1348099201, 1342483201, 1366416001, 
                            1361404801, 1358726401, 1384905601, 1425168001, 1378339201, 1517443201, 
                            1384992001, 1376265601, 1398816001, 1329350401, 1365552001, 1318896001, 
                            1385769601, 1348963201, 1343347201, 1367280001, 1362268801, 1359590401, 
                            1385769601),
                          tzone = "UTC", class = c("POSIXct", "POSIXt")), 
    trace = c("action 2,action 1,action 3", "action 2,action 1,action 3", 
              "action 2,action 1,action 3", "action 2,action 5,action 3", 
              "action 2,action 5,action 3", "action 2,action 5,action 3", 
              "action 2,action 25,action 26,action 3", "action 2,action 25,action 26,action 3", 
              "action 2,action 25,action 26,action 3", "action 2,action 25,action 26,action 3", 
              "action 2,action 1,action 3", "action 2,action 1,action 3", 
              "action 2,action 1,action 3", "action 2,action 1,action 3", 
              "action 2,action 1,action 3", "action 2,action 1,action 3", 
              "action 2,action 1,action 3", "action 2,action 1,action 3", 
              "action 2,action 1,action 3", "action 2,action 5,action 3", 
              "action 2,action 5,action 3", "action 2,action 5,action 3", 
              "action 2,action 25,action 26,action 3", "action 2,action 25,action 26,action 3", 
              "action 2,action 25,action 26,action 3", "action 2,action 25,action 26,action 3", 
              "action 2,action 1,action 3", "action 2,action 1,action 3", 
              "action 2,action 1,action 3", "action 2,action 1,action 3", 
              "action 2,action 1,action 3", "action 2,action 1,action 3"
    ),
    n = c(3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 3, 
          3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3),
    absolute_frequency = c(3L, 
                           3L, 3L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 3L, 3L, 3L, 3L, 3L, 3L, 
                           3L, 3L, 3L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 3L, 3L, 3L, 3L, 3L, 
                           3L),
    relative_frequency = c(0.272727272727273, 0.272727272727273, 
                           0.272727272727273, 0.0909090909090909, 0.0909090909090909, 
                           0.0909090909090909, 0.0909090909090909, 0.0909090909090909, 
                           0.0909090909090909, 0.0909090909090909, 0.272727272727273, 
                           0.272727272727273, 0.272727272727273, 0.272727272727273, 
                           0.272727272727273, 0.272727272727273, 0.272727272727273, 
                           0.272727272727273, 0.272727272727273, 0.0909090909090909, 
                           0.0909090909090909, 0.0909090909090909, 0.0909090909090909, 
                           0.0909090909090909, 0.0909090909090909, 0.0909090909090909, 
                           0.272727272727273, 0.272727272727273, 0.272727272727273, 
                           0.272727272727273, 0.272727272727273, 0.272727272727273)),
    row.names = c(NA, 
                  -32L),
    class = c("eventlog", "log", "tbl_df", "tbl", "data.frame"
    ),
    case_id = "id", activity_id = "activity", activity_instance_id = "activity_instance_id_by_bupar",
    lifecycle_id = "lifecycle_id",
    resource_id = "id",
    timestamp = "timestamp")
y <- jsonlite::fromJSON(paste0('https://cdn.rawgit.com/christophergandrud/networkD3/','master/JSONdata/energy.json'))

# XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# Shiny-App UI ----

# XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

ui <- shinyUI(fluidPage(
    title="shiny example",
    sidebarLayout(
        position="left",
        sidebarPanel(),
        mainPanel(
            tags$div(
                do.call(
                    tabsetPanel,
                    c(id='tabs',
                      lapply(1:2,function(y){
                          tabPanel(id=paste0("tab0",y),value=paste0("tab0",y),title=strong(paste0("This is tab0",y),align="left",style="black"),selected=1)
                      })
                    )
                ),
                uiOutput("out_ui")
            )
        )
    ),
    style=paste0("font-family: Arial;")
))

# XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# Shiny-App Server ----

# XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

server <- function(input,output,session){
    output$out_ui <- renderUI({

        # X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X
        # >>>> Problem Segment <<<< ----
        # X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X
        # Try: Chance this to "tab01"
        if(input$tabs=="tab02"){

            # Process
            animate_process(
                x,
                processmap=process_map(
                    x,
                    type=frequency("absolute",color_scale="Paired",color_edges="Greys"),
                    rankdir="TB",render=F,fixed_edge_with=T,
                    layout=layout_pm(
                        edge_weight=F,
                        edge_cutoff=0)),
                mapping=token_aes(
                    size=token_scale(8),
                    color=token_scale(
                        range="black",
                        scale="ordinal"
                    ),
                    opacity=token_scale(100)
                ),
                duration=60,mode="absolute",timeline=T,jitter=10,initial_time=0,
                repeat_count=10,repeat_delay=2,width=1200,height=900,
                sizingPolicy=htmlwidgets::sizingPolicy(
                    browser.fill=T,viewer.fill=F,
                    knitr.figure=F,knitr.defaultWidth="100%",knitr.defaultHeight="1000")
            )

        # X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X
        # >>>> Problem Segment <<<< ----
        # X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X
        # Try: Chance this to "tab02"
        }else if(input$tabs=="tab01"){

            # Sankey
            sankeyNetwork(
                Links=y$links,Nodes=y$nodes,Source='source',
                Target='target',Value='value',NodeID='name',
                units='TWh',fontSize=12,nodeWidth=30
            )
        }
    })
}
shinyApp(ui=ui,server=server)

# XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
d3.js

1条答案

按热度按时间
deikduxw

deikduxw1#

我可以告诉你为什么它不工作。processAninmateR使用D3 5.7。networkD3使用D3 4.5。我检查了一下以确保我的包是最新的;没有这样的运气。它看起来不像有一个版本的这些软件包，他们匹配。
这里有一个解决方法。这会让你保存Sankey，但你也可以保存过程动画（用saveWidget）。当你保存这个文件时，它需要在你的.R文件的目录下或该文件的子目录下。如果你使用这里显示的代码，它会自动保存到正确的位置。
在您的代码中发生了一些奇怪的事情，但我会大胆猜测，这是因为您可能已经尝试了一百万种方法来使其工作。
您可以将else if调用的信息替换为以下内容：


# save to an object

sn <- sankeyNetwork(Links = y$links, Nodes = y$nodes, Source = 'source',
                    Target = 'target', Value = 'value', NodeID = 'name',
                    units = 'TWh', fontSize = 12, nodeWidth = 30)
saveNetwork(sn, "sankey.html")               # save in local folder
addResourcePath("tmp", getwd())              # connect with file 
tags$iframe(src = "tmp/sankey.html", width = "100%",  # show plot in page
            frameBorder = "0", height = "500px")
赞(0）分享  回复(0）举报  2022-11-12
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com