将SVG和图像绑定到自定义HTML

Question

我正在学习如何为Shiny应用程序构建自定义UI，但是我找不到绑定SVG元素的方法，例如用network3D创建的图形或作为世界云的图像。

我可以使用plotly图轻松实现我想要的内容，该图给出对应的id和div元素中的类，但是我无法对SVG和图像对象执行相同的操作。

例如，我做了一个简单的仪表板。 第一个fluidrow包含HTML，第二个包含常规的闪亮UI函数。如您所见，我有意使用了相同的id，以便该图将显示在第一个fluidrow中，而不是第二个中，但是对于网络和世界云而言，不会发生这种情况。

library(shiny)
library(shinydashboard)
library(wordcloud)
library(networkD3)
library(plotly)


df<-data.frame("words"=c("A","B","C"), "freq"=c(20,15,5))


# Create fake data
src <- c("A", "A", "A", "A",
         "B", "B", "C", "C", "D")
target <- c("B", "C", "D", "J",
            "E", "F", "G", "H", "I")
networkData <- data.frame(src, target)


ui <- dashboardPage(
    dashboardHeader(title = "Dynamic sidebar"),
    dashboardSidebar(
        sidebarMenuOutput("menu")
    ),
    dashboardBody(  

        fluidRow( HTML(paste0(
            '<div class="row">
                <div class="col-md-6">
                <!-- Line chart -->
                <div class="box box-primary">
                <div class="box-header with-border">
                <i class="fa fa-bar-chart-o"></i>

                <h3 class="box-title">plotly</h3>

                <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
                </div>
                <div class="box-body">
                <div id="graph" style="height: 300px;"></div>
                </div>
                <!-- /.box-body-->
                </div>
                <!-- /.box -->
                      <div class="box box-primary">
            <div class="box-header with-border">
              <i class="fa fa-bar-chart-o"></i>

              <h3 class="box-title">Word Cloud</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div id="cloud" class="shiny-plot-output shiny-bound-output" style="height: 300px;"></div>
            </div>
            <!-- /.box-body-->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
      <div class="col-md-6">
                      <div class="box box-primary">
            <div class="box-header with-border">
              <i class="fa fa-bar-chart-o"></i>

              <h3 class="box-title">Topic Network</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div id="network" class="simpleNetwork html-widget html-widget-output shiny-bound-output" style="height: 300px;"></div>
            </div>
            <!-- /.box-body-->
          </div>
          <!-- /.box -->'

        ))),
        fluidRow(
            box(plotOutput("cloud"),status = "warning",
                solidHeader = TRUE, collapsible = TRUE),
            box(simpleNetworkOutput("network", height = 250),status = "warning",
                solidHeader = TRUE, collapsible = TRUE),
            box(plotlyOutput("graph", height = 250),status = "warning",
                solidHeader = TRUE, collapsible = TRUE))

    ))


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


    output$cloud <- renderPlot({

        set.seed(1234)
        wordcloud(words = df$words, freq = df$freq, min.freq = 1,
                  max.words=200, random.order=FALSE, rot.per=0.35, 
                  colors=brewer.pal(8, "Dark2"))

    })

    output$network<-renderSimpleNetwork({

        simpleNetwork(networkData)
    })


    output$graph<- renderPlotly({
        plot_ly(
            x = c("giraffes", "orangutans", "monkeys"),
            y = c(20, 14, 23),
            name = "SF Zoo",
            type = "bar"
        )
    })


}

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

我想了解如何使用HTML和底层逻辑显示这三个图。