在没有 R/shiny 的 plotlyProxy 的情况下更新 plotly plot

多亏了@ismirsehregal的建议以及链接问题及其他问题中的有用示例，我设法构建了一个不需要闪亮的应用程序来处理输入和更新用户绘制的线条。事实上，当将这个应用程序部署到我闪亮的服务器时，对用户输入的滞后反应已经消失了！

新代码如下所示。我以前没有任何使用 Javascript 的经验，所以这段代码可能会让更有经验的用户哭泣。但是，它确实适用于我的目的，并且可能对其他人有所帮助，所以请耐心等待。;)

#Load packages
library(plotly)
library(shiny)
library(htmlwidgets)



################################################################################
#UI function
ui <- fixedPage(
  
  plotlyOutput("myPlot", width = 500, height = 250),
  
  
  #Temporary grey line when actively drawing (will disappear when users stop drawing by setting color to transparent later)
  #see https://stackoverflow.com/questions/77538320/plotly-drawopenpath-color-of-finished-line-vs-drawing-in-process
  tags$head(
    tags$style(HTML("
      .select-outline {
        stroke: rgb(150, 150, 150) !important;
        }"))),
  
) #End UI






################################################################################
#Server function
server <- function(input, output, session) {
  
  js <- "
function(el, x){

      //Function to find unique indices in array, adapted from
      //https://stackoverflow.com/questions/71922585/find-position-of-all-unique-elements-in-array
      function uniqueIndices(arr) {
      const seen = new Set();
      const indices = [];
      for (const [i, n] of arr.entries()) {
              if (!seen.has(n)) {
                  seen.add(n);
                  indices.push(i);
              }
          }
          return indices;
      }
      

      //Function for linear interpolation between points given as two arrays 
      //adapted from https://stackoverflow.com/questions/59264119/how-do-i-interpolate-the-value-in-certain-data-point-by-array-of-known-points
      const interpolate = (xarr, yarr, xpoint) => {
        const   xa = [...xarr].reverse().find(x => x<=xpoint),
                xb = xarr.find(x => x>= xpoint),      
                ya = yarr[xarr.indexOf(xa)],      
                yb =yarr[xarr.indexOf(xb)]  
        return yarr[xarr.indexOf(xpoint)] || ya+(xpoint-xa)*(yb-ya)/(xb-xa)
            };





      //Define eligible integer x values for the user-drawn line
      var xLimits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      
      //y values are empty at first and will be filled with user-drawn coordinates
      var yValues = new Array(xLimits.length).fill('');
      


      var id = el.getAttribute('id');
      var gd = document.getElementById(id);
      

      //Main function
      //Adapted from https://stackoverflow.com/questions/64309573/freehand-drawing-ggplot-how-to-improve-and-or-format-for-plotly
      Plotly.update(id).then(attach);
        function attach() {

          //Check changes following relayout event
          gd.on('plotly_relayout', function(evt) {
          
            //Save most recent shape from plotly
            var output = gd.layout.shapes[0];
            
            //Only retain the path for further processing
            var path = output.path;
            
            //Transform path into x/y coordinates
            //Points in the path start with 'M' or 'L' - use this to split the string
            path = path.replace(/M|L/g, ',');
            path = path.split(',');
            
            //Remove empty first element
            path = path.slice(1);
            
            //Define as numeric
            path = path.map(Number);
            
 
            
            
            //x values are saved at odd indices, y values at even indices
            //Create x indices
            var xIndex = [];
            xIndex.length = (path.length / 2);
            
            for (let i =0; i <= path.length - 1; i+= 2) {
            xIndex.push(i);
            }
            


           //Create y indices
            var yIndex = [];
            yIndex.length = (path.length / 2);
            
            for (let i =1; i <= path.length; i+= 2) {
            yIndex.push(i);
            }
            
            
            //Now, separate path into x and y values
            var xPath = xIndex.map(i=>path[i]);
            var yPath = yIndex.map(i=>path[i]);


            //Only allow integer values for x axis
            xPath = xPath.map(item => Math.round(item));

            //After rounding to integers, x values might be duplicated
            //Retain only one value per x coordinate
            yPath = uniqueIndices(xPath).map(i=>yPath[i]);
            xPath = uniqueIndices(xPath).map(i=>xPath[i]);


            //Create 2 new placeholders for x/y coordinates
            //The goal is to take the existing path and fill 'holes' in it: The SVG path does not necessarily
            //have x/y coordinates for all values on the x axis. If e.g. a straight line from x1 = 1 to x2 = 5
            //is enough, the SVG path will only include these end points, but no points in between. To get a full
            //set of x/y coordinates, interpolation will be used
            var placeholderX = [];
            var placeholderY = [];

            
            //Interpolation function was defined above
            //The loop covers the whole range of the x axis, but the interpolate function returns only values
            //for the given x/y values at the i-th value of the x axis limits. For instance, if the axis limits are
            //0:10, and the input coordinates for x are 3, 6, 7, then the function will return values for 3:7
            for(let i = xLimits[0]; i < xLimits.length; i++) {
            placeholderY.push(interpolate(xPath, yPath, i));
            }

            //Save corresponding x values after interpolation
            //The loop above returns y values, while this loop creates an equal number of x values
            //It loops from the smallest value in xPath to the largest and saves all integer values inbetween
            //Since users can draw from left to right or right to left, the starting point for the loop is always
            //the minimum of the x coordinates and the end point is the maximum
            for(let i = Math.min(...[xPath[1], xPath[xPath.length - 1]]); 
                i < Math.max(...[xPath[1], xPath[xPath.length - 1]]);     i++) {
            placeholderX.push(i)
            }

            //Last index seems to be missing; add it
            placeholderX.push(1 + Math.max(...placeholderX));


            //Ensure that input has at least 2 entries so that a line can be drawn (not only a point)
            if(placeholderX.length > 1) {
            
             //Loop over entries in prepared, interpolated placeholder
             //The interpolated y coordinates are added to the final dataset at the position determined by the x coordinate placeholder
                for(let i = Math.min(...placeholderX); 
                    i <= Math.max(...placeholderX); i++) {
                yValues[i] = placeholderY[i];
                    }
            }
 

            //Remove previous shapes so that only the most recent line is visible
            Plotly.deleteTraces(gd, 0);
            Plotly.addTraces(gd, {x: xLimits, y: yValues, 
                                  line: {color: 'red'},
                                  hoverinfo: 'none',
                                  mode: 'lines+markers',
                                  }, 0);
            gd.update_layout(gd.layout.shapes = output);
          });
        };
  }
  " #End JS part
  
  
  
  
  
  
  #Plotly plot
  output$myPlot <- renderPlotly({
    plot_ly(type = "scatter", mode = "markers") %>% 
      
      plotly::layout(
        dragmode = "drawopenpath",
        newshape = list(line = list(color = "transparent")),
        
        #x axis
        xaxis = list(title = "x",
                     fixedrange = TRUE,
                     range = c(-0.1, 10.1),
                     showgrid = FALSE, zeroline = FALSE, showline = TRUE, mirror = TRUE),
        
        #y axis
        yaxis = list(title = "y",
                     fixedrange = TRUE,
                     range = c(1.1, 5.1),
                     showgrid = FALSE, zeroline = FALSE, showline = TRUE, mirror = TRUE)) %>% 
      
      #Call js
      onRender(js) 
    
  }) #End render plotly
  
  
} #End server function





################################################################################
#Execute app
shinyApp(ui, server)

我在之前的尝试中遇到的一个问题是，在通过 addTraces（） 将处理后的坐标添加到绘图中后，plotly 的 drawopenpath 中的线仍然可见。我在这里劫持了我另一个问题的答案，这有助于通过使完成的线不可见来回避这个问题。我想那里有更优雅的解决方案，但我对这里的行为完全满意。:)