如何渲染具有隐藏的预设轨迹(即基于列表的'legendonly')的绘图 [英] How to render a plotly plot with preset traces hidden i.e. 'legendonly' based on list

问题描述

感谢您对上一个问题的帮助

我怀疑这会涉及到某些document.getElementById("")方法来获取values $ tracesPlot1，然后执行与现有脚本相反的操作，以从该绘图中获取图例状态，并将其发送到绘图中，使用相同的onRender(js, data = "tracesPlot1")

此处:您会看到，当用户返回第一种配色方案时，某些按钮仍处于关闭状态，但是当然使所有迹线再次可见，而不是反映按钮状态.

ps:我的应用程序，用户可以在按3列中的1列分组的图之间进行切换，从而导致重新渲染，我想用渲染时取消选择的相同图例元素将其重新加载

library(plotly)
library(shiny)
library(htmlwidgets)

js <- c(
  "function(el, x, inputName){",
  "  var id = el.getAttribute('id');",
  "  var d3 = Plotly.d3;",
  "  el.on('plotly_restyle', function(evtData) {",
  "    var out = {};",
  "    d3.select('#' + id + ' g.legend').selectAll('.traces').each(function(){",
  "      var trace = d3.select(this)[0][0].__data__[0].trace;",
  "      out[trace.name] = trace.visible;",
  "    });",
  "    Shiny.setInputValue(inputName, out);",
  "  });",
  "}")

YNElement <-    function(idx){sprintf("YesNo_button-%d", idx)}

ui <- fluidPage(
  fluidRow(
    column(2,
           h5("Keep/Drop choices linked to colorscheme 1"),
           uiOutput('YNbuttons')

           ),
    column(8,
  plotlyOutput("plot1")
    ),
  column(2,
         h5('Switch grouping'),
         actionButton(inputId = 'Switch', label = icon('refresh'), style = "color: #f7ad6e;   background-color: white;  border-color: #f7ad6e;
                        height: 40px; width: 40px; border-radius: 6px;  border-width: 2px; text-align: center;  line-height: 50%; padding: 0px; display:block; margin: 2px")
         ), style = "margin-top:150px"
  ),
  verbatimTextOutput("tracesPlot1")
)

server <- function(input, output, session) {
  values <- reactiveValues(colors = T, NrOfTraces = length(unique(mtcars$cyl)))


  output$plot1 <- renderPlotly({
    if(values$colors) { colors <- c('red', 'blue', 'green') } else {colors <- c('black', 'orange', 'gray')}
    p1 <- plot_ly()
    p1 <-  add_trace(p1, data = mtcars, x = ~disp, y = ~mpg, type = 'scatter', mode = 'markers', color = ~as.factor(cyl), colors = colors)
    p1 <- layout(p1, title = 'mtcars group by cyl with switching colors')
    p1 %>% onRender(js, data = "tracesPlot1")   

  })


  observeEvent(input$Switch, { values$colors <- !values$colors    })


  observeEvent(values$NrOfTraces, { 
    values$dYNbs_cyl_el <- rep(T,values$NrOfTraces)
    names(values$dYNbs_cyl_el) <- sapply(1:values$NrOfTraces, function(x) {YNElement(x)})
  })

  output$YNbuttons <- renderUI({
    req(values$NrOfTraces)
    lapply(1:values$NrOfTraces, function(el) {
      YNb <- YNElement(el)
       if(values$dYNbs_cyl_el[[YNb]] == T ) {
        div(actionButton(inputId = YNb, label = icon("check"), style = "color: #339FFF;   background-color: white;  border-color: #339FFF;height: 34px; width: 34px; border-radius: 6px;  border-width: 2px; text-align: center;  line-height: 50%; padding: 0px; display:block; margin: 2px"))
      } else {
        div(actionButton(inputId = YNb, label = icon("times"), style = "color: #ff4d4d;   background-color: white;  border-color: #ff4d4d;height: 34px; width: 34px; border-radius: 6px;  border-width: 2px; text-align: center;  line-height: 50%; padding: 0px; display:block; margin: 2px"))
      }
     })
    })  

  observeEvent(input$tracesPlot1, {
    listTraces <- input$tracesPlot1
    #values$tracesPlot1 <- input$tracesPlot1
    listTracesTF <- gsub('legendonly', FALSE, listTraces)
    lapply(1:values$NrOfTraces, function(el) {
      if(el <= length(listTracesTF)) {
        YNb <- YNElement(el)
        if(values$dYNbs_cyl_el[[YNb]] != listTracesTF[el]) {
          values$dYNbs_cyl_el[[YNb]] <- listTracesTF[el]
        }
      }
    })
  })

  output$tracesPlot1 <- renderPrint({ unlist(input$tracesPlot1)  })
}
shinyApp(ui, server)

解决方案

您可以这样设置跟踪的visible属性:

library(plotly)

legendItems <- list("4" = TRUE, "6" = "legendonly", "8" = TRUE)

p <- plot_ly() %>%
  add_trace(p1, data = mtcars, x = ~disp, y = ~mpg, type = 'scatter', mode = 'markers', color = ~as.factor(cyl))
p <- plotly_build(p)

for(i in seq_along(p$x$data)){
  p$x$data[[i]]$visible <- legendItems[[p$x$data[[i]]$name]]
}

p

Thanks to help on a previous question here I can now record in a list which traces are hidden in a plotly plot by reading out the legend list of TRUE/legendonly with a piece of javascript, which I use to change the list entries, and the color of associated buttons.

What I'm now also looking to do, is to maintain that TRUE/legendonly status when the plot is re-rendered. In the dummy app below, the plot can be re-rendered with the switch actionbutton, which causes a re-render due to a change of colors.

In other words: how to render the plot with certain traces already having 'legendonly status based on values$tracesPlot1 that was altered/recorded the last time the user looked at this particular plot.

I suspect this would involve some document.getElementById("") approach to get values$tracesPlot1, and then do the opposite of the script that is already in place to get the legend status out of this plot, and send it into the plot, with the use of the same onRender(js, data = "tracesPlot1")

HERE: you can see that when the user goes back to the first color scheme, some of the buttons are still switched off, but the plot of course has all traces visible again, instead of reflecting the button status.

p.s.:my app the user can switch the plot between grouped by 1 of 3 columns, causing re-rendering, and I would like to load it back with the same legend elements deselected when it renders

library(plotly)
library(shiny)
library(htmlwidgets)

js <- c(
  "function(el, x, inputName){",
  "  var id = el.getAttribute('id');",
  "  var d3 = Plotly.d3;",
  "  el.on('plotly_restyle', function(evtData) {",
  "    var out = {};",
  "    d3.select('#' + id + ' g.legend').selectAll('.traces').each(function(){",
  "      var trace = d3.select(this)[0][0].__data__[0].trace;",
  "      out[trace.name] = trace.visible;",
  "    });",
  "    Shiny.setInputValue(inputName, out);",
  "  });",
  "}")

YNElement <-    function(idx){sprintf("YesNo_button-%d", idx)}

ui <- fluidPage(
  fluidRow(
    column(2,
           h5("Keep/Drop choices linked to colorscheme 1"),
           uiOutput('YNbuttons')

           ),
    column(8,
  plotlyOutput("plot1")
    ),
  column(2,
         h5('Switch grouping'),
         actionButton(inputId = 'Switch', label = icon('refresh'), style = "color: #f7ad6e;   background-color: white;  border-color: #f7ad6e;
                        height: 40px; width: 40px; border-radius: 6px;  border-width: 2px; text-align: center;  line-height: 50%; padding: 0px; display:block; margin: 2px")
         ), style = "margin-top:150px"
  ),
  verbatimTextOutput("tracesPlot1")
)

server <- function(input, output, session) {
  values <- reactiveValues(colors = T, NrOfTraces = length(unique(mtcars$cyl)))


  output$plot1 <- renderPlotly({
    if(values$colors) { colors <- c('red', 'blue', 'green') } else {colors <- c('black', 'orange', 'gray')}
    p1 <- plot_ly()
    p1 <-  add_trace(p1, data = mtcars, x = ~disp, y = ~mpg, type = 'scatter', mode = 'markers', color = ~as.factor(cyl), colors = colors)
    p1 <- layout(p1, title = 'mtcars group by cyl with switching colors')
    p1 %>% onRender(js, data = "tracesPlot1")   

  })


  observeEvent(input$Switch, { values$colors <- !values$colors    })


  observeEvent(values$NrOfTraces, { 
    values$dYNbs_cyl_el <- rep(T,values$NrOfTraces)
    names(values$dYNbs_cyl_el) <- sapply(1:values$NrOfTraces, function(x) {YNElement(x)})
  })

  output$YNbuttons <- renderUI({
    req(values$NrOfTraces)
    lapply(1:values$NrOfTraces, function(el) {
      YNb <- YNElement(el)
       if(values$dYNbs_cyl_el[[YNb]] == T ) {
        div(actionButton(inputId = YNb, label = icon("check"), style = "color: #339FFF;   background-color: white;  border-color: #339FFF;height: 34px; width: 34px; border-radius: 6px;  border-width: 2px; text-align: center;  line-height: 50%; padding: 0px; display:block; margin: 2px"))
      } else {
        div(actionButton(inputId = YNb, label = icon("times"), style = "color: #ff4d4d;   background-color: white;  border-color: #ff4d4d;height: 34px; width: 34px; border-radius: 6px;  border-width: 2px; text-align: center;  line-height: 50%; padding: 0px; display:block; margin: 2px"))
      }
     })
    })  

  observeEvent(input$tracesPlot1, {
    listTraces <- input$tracesPlot1
    #values$tracesPlot1 <- input$tracesPlot1
    listTracesTF <- gsub('legendonly', FALSE, listTraces)
    lapply(1:values$NrOfTraces, function(el) {
      if(el <= length(listTracesTF)) {
        YNb <- YNElement(el)
        if(values$dYNbs_cyl_el[[YNb]] != listTracesTF[el]) {
          values$dYNbs_cyl_el[[YNb]] <- listTracesTF[el]
        }
      }
    })
  })

  output$tracesPlot1 <- renderPrint({ unlist(input$tracesPlot1)  })
}
shinyApp(ui, server)

解决方案

You can set the visible property of the traces like this:

library(plotly)

legendItems <- list("4" = TRUE, "6" = "legendonly", "8" = TRUE)

p <- plot_ly() %>%
  add_trace(p1, data = mtcars, x = ~disp, y = ~mpg, type = 'scatter', mode = 'markers', color = ~as.factor(cyl))
p <- plotly_build(p)

for(i in seq_along(p$x$data)){
  p$x$data[[i]]$visible <- legendItems[[p$x$data[[i]]$name]]
}

p

这篇关于如何渲染具有隐藏的预设轨迹(即基于列表的'legendonly')的绘图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！