javascript - 通过 selectInput 操作图例 - rCharts 中的 multibarChart

Question

我创建了一个简单的应用程序，其中包括 selectInput 小部件和 rCharts 中的条形图。我想要完成的是创建带有所有三本书的图例的绘图，但默认情况下仅显示小部件选择的一本书。因此，当我从 Book1 更改为 Book2 时，绘图最初将仅显示有关 Book2 的信息，但图例图将包含 Book1 > 和 Book3 (默认情况下均禁用) - 如果我愿意，我可以随时选择 Book1 或 Book3。我相信这是 JS 问题，所以我尝试解决它，但没有任何改变。有什么想法如何处理吗？谢谢。

library(shiny)
library(rCharts)

books <- c('Book1','Book2','Book3')
df <- data.frame(book = rep(books, each = 10), 
                 year = rep(2000:2009,3),
                 sale = sample(100:1000, 30, replace = T))

ui <- shinyUI(
      fluidPage(
            HTML("
            <script>
                 $( document ).ready(function() {
                        if ( $(\"select#book div.selectize-dropdown div[data-value='Book1']\").hasClass('selected')) {
                              console.log('true');
                              $('#nvd3Plot .nv-legend g.nv-series').eq(1).addClass('disabled');
                              $('#nvd3Plot .nv-legend g.nv-series').eq(2).addClass('disabled');
                        }
                        else {
                              console.log('false');

                        }
                 }); 
            </script>"),

            selectInput('book', 'Select a book', choices = books, selected = 'Book1'),
            showOutput("nvd3Plot", "nvd3")
      )
)

server <- function(input, output, session) {
      output$nvd3Plot <- renderChart2({

            chartObject <- nPlot(sale ~ year, group = "book", data = df, type = "multiBarChart")
            chartObject$chart(
                  showControls = FALSE
                  )

            return(chartObject)
      })
}

shinyApp(ui, server)

更新

我找到了这个solution但实际上我不知道如何在 R 中实现它。

Answer 1

使用 here 中的答案，您可以使用自定义消息处理程序以编程方式单击图例。

您可以在 ui.R 中添加:

tags$script('
        Shiny.addCustomMessageHandler("change_selected_book",
        function(book) {
          d3.select("g.nv-legendWrap").selectAll("g.nv-series.disabled")
          .each(function(d) {
            this.dispatchEvent(new Event("click"));
         });

          d3.select("g.nv-legendWrap").selectAll("g.nv-series").filter(
            function(d) { return d.key != book; })
        .each(function(d) {
            this.dispatchEvent(new Event("click"));
        });
        });
    ')

并在您的server.R中:

 observe({
    session$sendCustomMessage(type = "change_selected_book", input$book)
  })

该代码单击所有已禁用的系列，一旦启用所有系列，它就会单击除用户选择禁用的那本书之外的所有书籍的图例。

一个缺点是 selectInput 元素是在图表之前创建的，因此它最初会显示所有三本书，直到用户选择一本书。