如何在网格中排列html小部件图以导出为pdf? [英] How to arrange html widget plots in a grid for export as pdf?

问题描述

我想结合html小部件的丰富性(主要是plotly和networkD3)，并可以将它们作为图布置在R中的网格中，以将它们导出为pdf图形以发布.但是，如果我在R中创建了一些html小部件对象，并尝试使用 gridExtra :: grid.arrange()排列它们(请参见下面的最小示例)，则会出现以下错误:

I would like to combine the richness of html widgets (mainly plotly and networkD3), with the possibility of arranging them as plots in a grid in R, to export them as pdf graphic for a publication. However, if I create some html widget objects in R and try to arrange them with gridExtra::grid.arrange() (see minimal example below) I get the following error:

Error in gList(list(x = list(links = list(source = c(0, 0), target = c(1,  : 
only 'grobs' allowed in "gList"

我搜索了将html小部件转换为grob或图"，以便能够将它们排列在网格中，但是找不到任何相关信息.我可以采用漫长的手动方式，首先使用 htmlwidgets :: saveWidget()将html小部件保存为网站，然后使用 webshot :: webshot()，然后使用矢量图形编辑器(例如Inkscape)手动排列图形.但是，尽管进行了手动操作，但所有转换步骤都可能导致质量下降.

I searched for "converting html widgets to grobs or plots" to be able to arrange them in a grid, but could not find any relevant information. I could go the long manual way of first saving the html widget as a website with htmlwidgets::saveWidget(), then converting it to a pdf with webshot::webshot() and arranging the graphics manually with a vector graphic editor (such as Inkscape). But despite the manual effort, all the conversion steps might results in a decrease in quality.

也许我可以以某种方式在表格或列中排列LaTeX R-Markdown文档中的图形，并指定纸张尺寸以适合我的绘图.但是以某种方式，这感觉也不是理想的解决方案，因为我可能想将我的图形动态地排列在几列和几行中，添加标题等，这会使LaTeX/knitr中的排列变得相当复杂.

Maybe I could somehow arrange the graphics in LaTeX R-Markdown document with tables or columns and specify the paper dimension to fit my plot. But somehow that feels neither like an ideal solution, since I might want to arrange my graphs dynamically in several columns and rows, add titles, ect., which would make the arrangement quite complex in LaTeX/knitr.

因此，在我开始手工编织所有内容之前，我想问一下您是否知道一种更好的方式来布置一些html小部件图并将它们导出到R中的pdf中?

So before I embark on the journey of knitting everything manually together, I would like to ask whether you know a better way to arrange some html widgets plots and export them to pdf within R?

最小示例

这里有一个最小的例子来重现我的问题.假设我的目标是一个图表，该图表将两个不同进程的能量流相互比较(通过networkD3的Sankey图)，方法是将它们彼此并排布置在网格中，如下所示: 示例性的Sankey曲线图

Here is a little minimal example to reproduce my problem. Let’s say my aim is a graph which compares the energy flow of two different processes with each other (Sankey diagrams with networkD3), by arranging them next to each other in a grid, like so: Exemplary arranged Sankey plots

这是我的代码:

library(networkD3)
library(grid)
library(gridExtra)

## Create simplified Data
dfSankey <- list()
dfSankey$nodes <- data.frame(Name = c("Final Energy","Conversion Losses","Useful Energy"))
#1st process
dfSankey$links1 <- data.frame(Source = c(0,0),Target=c(1,2),Value=c(30,70))
#2nd process
dfSankey$links2 <- data.frame(Source = c(0,0),Target=c(1,2),Value=c(10,60))

## Draw Sankeys
plSankey1 <- sankeyNetwork(Links = dfSankey$links1, Nodes = dfSankey$nodes, Source = 'Source',
                          Target = 'Target', Value = 'Value', NodeID = 'Name')
plSankey2 <- sankeyNetwork(Links = dfSankey$links2, Nodes = dfSankey$nodes, Source = 'Source',
                           Target = 'Target', Value = 'Value', NodeID = 'Name')

#Arrange them next to each other
grid.arrange(plSankey1,plSankey2)

这会导致开头提到的错误消息.

This results in the error message mentioned in the beginning.

Windows 7，R-Studio 0.99.903，R版本3.2.3，网格3.2.3，gridExtra 2.2.1，networkD3 0.2.13

推荐答案

在阿米特·科利(Amit Kohli)的启发下，我开始尝试使用flexdashboard，各种Rmarkdown格式(html，pdf，isolides等)，表示法-但全部与我的目标相比，其中的一些缺点.

After the inspiration of Amit Kohli I started experimenting with flexdashboard, all kinds of Rmarkdown formats (html, pdf, isolides, ...), Rpresentations - but all of them had some drawbacks compared to my target.

我认为，使用闪亮应用可以实现最佳视觉效果.然后使用 chrome 将生成的网站另存为pdf，最后使用 briss 裁剪该pdf.

In my opinion the best visual results can be achieved with a shiny app. Then saving the resulting website as pdf with chrome and finally croping the pdf with briss.

library(networkD3)

## Create simplified Data
dfSankey <- list()
dfSankey$nodes <- data.frame(Name = c("Final Energy","Conversion Losses","Useful Energy"))
#1st process
dfSankey$links1 <- data.frame(Source = c(0,0),Target=c(1,2),Value=c(30,70))
#2nd process
dfSankey$links2 <- data.frame(Source = c(0,0),Target=c(1,2),Value=c(10,60))

# Define UI for application that draws two Sankeys in columns
ui <- shinyUI(fluidPage(column(6,
                               h2("Process 1", align = "center"),
                               uiOutput("plot1.ui")
                               ),
                        column(6,
                               h2("Process 2", align = "center"),
                               uiOutput("plot2.ui")
                               )
))

# Define server logic required to draw the sankeys
server <- shinyServer(function(input, output) {

    #Render plot area relative to flow height
    output$plot1.ui <- renderUI({
      sankeyNetworkOutput("Plot1", height = "400px")
    })
    output$plot2.ui <- renderUI({
      sankeyNetworkOutput("Plot2", height=paste0(400*(70/100),"px"))
    })

    #Render Sankeys
   output$Plot1 <- renderSankeyNetwork({
     sankeyNetwork(Links = dfSankey$links1, Nodes = dfSankey$nodes, Source = 'Source',
                   Target = 'Target', Value = 'Value', NodeID = 'Name', fontSize = 15, nodeWidth = 10)
   })

   output$Plot2 <- renderSankeyNetwork({
     sankeyNetwork(Links = dfSankey$links2, Nodes = dfSankey$nodes, Source = 'Source',
                   Target = 'Target', Value = 'Value', NodeID = 'Name', fontSize = 15, nodeWidth = 10)
   })
})

# Run the application 
shinyApp(ui = ui, server = server)

仍然感觉写一个闪亮的应用程序并进行所有这些手动转换只是为了在pdf中安排两个html小部件图形，这有点过头了，但是至少生成的pdf图片看起来非常令人愉悦.

Still feels a bit like a overkill to write a shiny app and doing all this manual converting just for arranging two html widget figures in a pdf, but at least the resulting pdf picture looks very pleasing.

我希望这也可以对其他人有所帮助.

I hope this might help others too.

这篇关于如何在网格中排列html小部件图以导出为pdf?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！