javascript - 如何渲染带有隐藏预设痕迹的情节图，即基于列表的“legendonly”

问题描述

感谢对上一个问题的帮助，我现在可以通过读出带有的图例列表来记录隐藏在图中的，我用list它来更改列表条目和相关按钮的颜色。tracesplotlyTRUE/legendonlyjavascript

我现在还想做的是在TRUE/legendonly重新渲染情节时保持这种状态。在下面的虚拟应用程序中，plot可以使用 switch 重新渲染actionbutton，这会render由于颜色的变化而导致重新渲染。

换句话说：如何根据values$tracesPlot1用户上次查看此特定图时已更改/记录的已具有“传奇”状态的某些痕迹来渲染图。

我怀疑这将涉及一些document.getElementById("")获取值 $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)

标签： javascriptrplotlylegendr-plotly

javascript - 如何渲染带有隐藏预设痕迹的情节图，即基于列表的“legendonly”

问题描述

解决方案

推荐阅读