r2d3 + Shiny：无法在 D3 中渲染本地图像，尽管能够使用 URL 渲染图像

Posted 2023-02-22

【中文标题】r2d3 + Shiny：无法在 D3 中渲染本地图像，尽管能够使用 URL 渲染图像

【英文标题】：r2d3 + Shiny: can't render a local image in D3, despite being able to render one using an URL

【发布时间】：2022-01-18 00:58:58

【问题描述】：

我正在努力让 r2d3 + Shiny 只渲染一个 .png 文件。如果我在 .js 文件中使用 URL，我可以做到这一点，但如果我使用指向完全相同文件的相对路径但存储在本地，则不会呈现任何内容。我当然检查过本地文件是否存在，路径中没有错字等。

我已经构建了一个玩具 R Shiny 应用来重现该问题。它只呈现一个 d3 图表，它本身只是在 .png 文件中显示 RStudio 徽标（注释/取消注释 .js 文件的最后两行以查看问题）。为什么会这样？如何使用 r2d3 获取要显示的本地图像？我一直在寻找解决方案几个小时，但徒劳无功。

app.R

library(r2d3)
library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(

    # Application title
    titlePanel("Reprex"),

    # Sidebar with a slider input for number of bins 
    sidebarLayout(
        sidebarPanel(
            
        ),

        # Show a plot of the generated distribution
        mainPanel(
            d3Output("d3Chart", width = "100%", height = "800px") # d3output is the kind of output needed for D3; it requires renderD3 on the server side
        )
    )
)

# Define server logic required to draw a histogram
server <- function(input, output) 

    output$d3Chart <- renderD3(
        # generate bins based on input$bins from ui.R
        r2d3(script = "./reprex.js", d3_version ="6")
    )


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

reprex.js

svg
  .append("image")
  .attr("class","expand")
  .attr("x", 0)
  .attr("y", 0)
  .attr('width', 50)
  .attr('height', 50)
  .style("opacity",1)
  .attr("xlink:href", "https://www.rstudio.com/wp-content/uploads/2018/10/RStudio-Logo.png"); // It works with that image but NOT with a local image. Why?
  //.attr("xlink:href", "./RStudio-Logo.png");

我正在使用 R-4.1.2 + RStudio 1.4.1717 运行 Shiny 应用程序。

【问题讨论】：

确保RStudio-Logo.png在www目录内或在addResourcePath添加的目录内。

RStudio-Logo.png 与 app.R 和 reprex.js 位于同一目录中，不涉及 www 目录。不知道addResourcePath应该怎么用，我看看能不能解决问题。

【参考方案1】：

多亏了 Geovany，这个问题得以解决。我在 app.R 中的 ui 函数之前添加了 addResourcePath("images", ".") ，这样我就可以使用标签 images 访问存储我的图片的工作目录（此处为 app.R 所在的位置）。通过将reprex.js的最后一行替换为.attr("xlink:href", "images/RStudio-Logo.png");（并让上一行注释掉），图片就显示出来了。