如何在Shiny应用中渲染R data.tree图形 匹配RStudio查看器效果

问题说明 #

现有开发场景下已生成符合样式要求的data.tree对象，在RStudio查看器中可正常展示预期树形效果，但无法在Shiny应用中复现与本地查看器一致的显示效果。
问题复现的核心代码如下：

library(data.tree)

treedata <- data.frame(c("Product A", "Product A", "Product A", "Product A", "Product A", "Product A"),
                       c("Sub-A", "Sub-A", "Sub-A", "Sub-B", "Sub-B", "Sub-B"),
                       c("Comp-1", "Comp-1", "*", "Comp-2", "Comp-2", "*"),
                       c("SubCompA", "SubCompB", "SubCompC", "SubCompA", "SubCompB", "SubCompC"))
names(treedata) <- c("ProductName", "SubProjects", "Component" ,"SQComponents")

product <- "Product A"

treedata$pathString <- paste(product,
                             treedata$SubProjects,
                             treedata$Component,
                             treedata$SQComponents,
                             sep = "/")

theTree <- as.Node(treedata)

SetGraphStyle(theTree, rankdir = "TB")
SetEdgeStyle(theTree, arrowhead = "vee", color = "grey35", penwidth = 2)
SetNodeStyle(theTree, style = "filled,rounded", shape = "box", fillcolor = "GreenYellow",
             fontname = "helvetica",
             fontcolor = "black",
             tooltip = GetDefaultTooltip)

p <- plot(theTree)
print(p)

实现原理 #

data.tree的plot方法默认调用DiagrammeR生成grViz/htmlwidgets类型的交互图形对象，Shiny原生支持htmlwidgets类组件渲染，只需匹配DiagrammeR对应的渲染函数即可实现和RStudio查看器完全一致的显示效果，不需要额外转换图形格式。

完整实现代码 #

library(shiny)
library(data.tree)
library(DiagrammeR)

# 树形对象生成逻辑可放在全局，也可放在服务端响应式流程中
treedata <- data.frame(c("Product A", "Product A", "Product A", "Product A", "Product A", "Product A"),
                       c("Sub-A", "Sub-A", "Sub-A", "Sub-B", "Sub-B", "Sub-B"),
                       c("Comp-1", "Comp-1", "*", "Comp-2", "Comp-2", "*"),
                       c("SubCompA", "SubCompB", "SubCompC", "SubCompA", "SubCompB", "SubCompC"))
names(treedata) <- c("ProductName", "SubProjects", "Component" ,"SQComponents")
product <- "Product A"
treedata$pathString <- paste(product,
                             treedata$SubProjects,
                             treedata$Component,
                             treedata$SQComponents,
                             sep = "/")
theTree <- as.Node(treedata)
SetGraphStyle(theTree, rankdir = "TB")
SetEdgeStyle(theTree, arrowhead = "vee", color = "grey35", penwidth = 2)
SetNodeStyle(theTree, style = "filled,rounded", shape = "box", fillcolor = "GreenYellow",
             fontname = "helvetica",
             fontcolor = "black",
             tooltip = GetDefaultTooltip)

ui <- fluidPage(
  # 树形图输出占位
  DiagrammeROutput(outputId = "tree_plot", height = "600px")
)

server <- function(input, output, session) {
  output$tree_plot <- renderDiagrammeR({
    # 直接返回plot生成的对象即可，无需额外调用print
    plot(theTree)
  })
}

shinyApp(ui, server)

注意事项 #

• 必须同时加载DiagrammeR包，data.tree的plot方法依赖该包生成可在网页端渲染的图形对象
• 渲染函数中直接返回plot(theTree)的结果即可，不要额外调用print()方法
• 可通过DiagrammeROutput的height、width参数调整树形图在Shiny页面中的展示尺寸，所有提前设置的节点、边、全局样式会完整保留，和RStudio查看器效果完全一致

内容的提问来源于stack exchange，提问作者Mikey