Javascript 在绘图仪中添加带有“选择框”角点的永久着色矩形

这是前一篇文章（）的延续

我正在创建一个应用程序，如果用户在Plotly中使用“框选择”工具，则框选择旁边将显示一个填充矩形。这项工作目前正在进行，如下MWE所示：

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

ui <- basicPage(
  plotlyOutput("plot1")
)

server <- function(input, output) {

  p <- ggplot(mtcars, aes(x = wt, y = mpg)) + geom_point(alpha=0) + xlim(0,5) +ylim(-3,3)
  gp <- ggplotly(p)

  set.seed(3)
  myDF <- data.frame(X1=rnorm(10,-1), X2=rnorm(10,-1), X3=rnorm(10,-1), X4=rnorm(10,1), X5=rnorm(10,1), X6=rnorm(10,1))
  colNms <- colnames(myDF)
  nVar <- length(colNms)

  output$plot1 <- renderPlotly({
    gp %>% layout(dragmode="select") %>%
      onRender("
       function(el, x, data) {

       var myDF = data.myDF
       var Traces = [];
       var dLength = myDF.length
       var vLength = data.nVar
       var cNames = data.colNms
       for (a=0; a<dLength; a++){
       xArr = [];
       yArr = [];
       for (b=0; b<vLength; b++){
       xArr.push(b)
       yArr.push(myDF[a][cNames[b]]);
       }
       var pcpLine = {
       x: xArr,
       y: yArr,
       mode: 'lines',
       line: {
       color: 'orange',
       width: 1
       },
       opacity: 0.9,
       }
       Traces.push(pcpLine);
       }
       Plotly.addTraces(el.id, Traces);

       el.on('plotly_selected', function(e) {
       var dLength = myDF.length
       var selectedPCP = []
       var xMin = e.range.x[0]
       var xMax = e.range.x[1]
       var yMin = e.range.y[0]
       var yMax = e.range.y[1]

       console.log([xMin, xMax, yMin, yMax])

       var Traces = []
       var drawRect = {
       type: 'rect',
       x0: xMin,
       y0: yMin,
       x1: xMax,
       y1: yMax,
       line: {
       color: 'green',
       width: 1
       },
       fillcolor: 'green'
       }
       var update = {
       shapes:[drawRect]
       }
       Plotly.relayout(el.id, update)
       })
       }", data = list(myDF = myDF, nVar = nVar, colNms = colNms))})

  }
shinyApp(ui, server)

库（ggplot2）
图书馆（闪亮）
图书馆（绘本）
库（htmlwidgets）
ui这正是您想要的，我添加了以下内容：


矩形存储在一个变量（
rects
）中，具有更持久的作用域
通过使用
onInputChange
事件处理程序，Shining程序可以使用它们
因为它们是一个大字符向量，所以在打印出来之前需要转换成数据帧

代码如下：

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

ui <- basicPage(
  plotlyOutput("plot1"),
  verbatimTextOutput("rectdf")
)

server <- function(input, output) {

  p <- ggplot(mtcars, aes(x = wt, y = mpg)) + geom_point(alpha=0) + xlim(0,5) +ylim(-3,3)
  gp <- ggplotly(p)

  set.seed(3)
  myDF <- data.frame(X1=rnorm(10,-1), X2=rnorm(10,-1), X3=rnorm(10,-1), X4=rnorm(10,1), X5=rnorm(10,1), X6=rnorm(10,1))
  colNms <- colnames(myDF)
  nVar <- length(colNms)

  inputRectDf <- reactive({
    req(input$rects)
    # data comes back as a big character vector
    # so we reformat it as a dataframe here
    df <- data.frame(t(matrix(input$rects,nrow=8)))
    names(df) <- names(input$rects)[1:8]
    return(df)
  })
  output$rectdf <- renderPrint({print(inputRectDf())})


  output$plot1 <- renderPlotly({
    gp %>% layout(dragmode="select") %>%
      onRender("
               function(el, x, data) {
               var rects = [];

               var myDF = data.myDF
               var Traces = [];
               var dLength = myDF.length
               var vLength = data.nVar
               var cNames = data.colNms
               for (a=0; a<dLength; a++){
               xArr = [];
               yArr = [];
               for (b=0; b<vLength; b++){
               xArr.push(b)
               yArr.push(myDF[a][cNames[b]]);
               }
               var pcpLine = {
               x: xArr,
               y: yArr,
               mode: 'lines',
               line: {
               color: 'orange',
               width: 1
               },
               opacity: 0.9,
               }
               Traces.push(pcpLine);
               }
               Plotly.addTraces(el.id, Traces);

               el.on('plotly_selected', function(e) {
               var dLength = myDF.length
               var selectedPCP = []
               var xMin = e.range.x[0]
               var xMax = e.range.x[1]
               var yMin = e.range.y[0]
               var yMax = e.range.y[1]

               console.log([xMin, xMax, yMin, yMax])

               var Traces = []
               var drawRect = {
               type: 'rect',
               x0: xMin,
               y0: yMin,
               x1: xMax,
               y1: yMax,
               line: {
               color: 'green',
               width: 1
               },
               fillcolor: 'green'
               }
               rects.push(drawRect);
               var update = {
               shapes:rects
               }
               Plotly.relayout(el.id, update)
               Shiny.onInputChange('rects', rects); // make the rects available to shiny
               })
               }", data = list(myDF = myDF, nVar = nVar, colNms = colNms))})

  }
shinyApp(ui, server)

库（ggplot2）
图书馆（闪亮）
图书馆（绘本）
库（htmlwidgets）
ui这正是您想要的，我添加了以下内容：


矩形存储在一个变量（
rects
）中，具有更持久的作用域
通过使用
onInputChange
事件处理程序，Shining程序可以使用它们
因为它们是一个大字符向量，所以在打印出来之前需要转换成数据帧

代码如下：

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

ui <- basicPage(
  plotlyOutput("plot1"),
  verbatimTextOutput("rectdf")
)

server <- function(input, output) {

  p <- ggplot(mtcars, aes(x = wt, y = mpg)) + geom_point(alpha=0) + xlim(0,5) +ylim(-3,3)
  gp <- ggplotly(p)

  set.seed(3)
  myDF <- data.frame(X1=rnorm(10,-1), X2=rnorm(10,-1), X3=rnorm(10,-1), X4=rnorm(10,1), X5=rnorm(10,1), X6=rnorm(10,1))
  colNms <- colnames(myDF)
  nVar <- length(colNms)

  inputRectDf <- reactive({
    req(input$rects)
    # data comes back as a big character vector
    # so we reformat it as a dataframe here
    df <- data.frame(t(matrix(input$rects,nrow=8)))
    names(df) <- names(input$rects)[1:8]
    return(df)
  })
  output$rectdf <- renderPrint({print(inputRectDf())})


  output$plot1 <- renderPlotly({
    gp %>% layout(dragmode="select") %>%
      onRender("
               function(el, x, data) {
               var rects = [];

               var myDF = data.myDF
               var Traces = [];
               var dLength = myDF.length
               var vLength = data.nVar
               var cNames = data.colNms
               for (a=0; a<dLength; a++){
               xArr = [];
               yArr = [];
               for (b=0; b<vLength; b++){
               xArr.push(b)
               yArr.push(myDF[a][cNames[b]]);
               }
               var pcpLine = {
               x: xArr,
               y: yArr,
               mode: 'lines',
               line: {
               color: 'orange',
               width: 1
               },
               opacity: 0.9,
               }
               Traces.push(pcpLine);
               }
               Plotly.addTraces(el.id, Traces);

               el.on('plotly_selected', function(e) {
               var dLength = myDF.length
               var selectedPCP = []
               var xMin = e.range.x[0]
               var xMax = e.range.x[1]
               var yMin = e.range.y[0]
               var yMax = e.range.y[1]

               console.log([xMin, xMax, yMin, yMax])

               var Traces = []
               var drawRect = {
               type: 'rect',
               x0: xMin,
               y0: yMin,
               x1: xMax,
               y1: yMax,
               line: {
               color: 'green',
               width: 1
               },
               fillcolor: 'green'
               }
               rects.push(drawRect);
               var update = {
               shapes:rects
               }
               Plotly.relayout(el.id, update)
               Shiny.onInputChange('rects', rects); // make the rects available to shiny
               })
               }", data = list(myDF = myDF, nVar = nVar, colNms = colNms))})

  }
shinyApp(ui, server)

库（ggplot2）
图书馆（闪亮）
图书馆（绘本）
库（htmlwidgets）
因此，每次用户选择一个选择框时，rects变量将获得另一行，并且所有绿色框都将被重新填充。聪明的解决方案！因此，每次用户选择一个选择框时，rects变量将获得另一行，并且所有绿色框都将被重新填充。聪明的解决方案！