Javascript 仅打印某些观察值时，框选返回的行索引不正确-Plotly、htmlWidgets、Shining

我正在编写一个闪亮的应用程序，其中用户有两个滑块输入——一个用于“折叠更改”，另一个用于“p值”。有一个数据集包含10个观测值，每个观测值都有一个折叠变化和p值。在给定时间，仅绘制p值小于“p值”滑块输入且折叠变化大于“折叠变化”滑块输入的点

到目前为止，我所写的内容如下：

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

ui <- shinyUI(fluidPage(
  sliderInput("threshP", "P-value:", min = 0, max = 1, value=0.05, step=0.05),
  sliderInput("threshFC", "Fold change:", min = 0, max = 10, value=5, step=0.5),
  plotlyOutput("plot1"),
  textOutput("selectedValues")
))

server <- shinyServer(function(input, output) {
  set.seed(1)
  threshP <- reactive(input$threshP)
  threshFC <- reactive(input$threshFC)

  dat <- data.frame(ID = paste0("ID",1:10), FC=runif(10,0,10), pval=runif(10,0,1))
  dat$ID <- as.character(dat$ID)

  # x-axis FC, y-axis pval
  xMax = max(dat$FC)
  xMin = min(dat$FC)
  yMax = max(dat$pval)
  yMin = min(dat$pval)

  df <- data.frame()
  p <- ggplot(df) + geom_point() + xlim(xMin, xMax) + ylim(yMin, yMax)
  gp <- ggplotly(p)

  output$plot1 <- renderPlotly({
    gp %>% onRender("
      function(el, x, data) {
      var dat = data.dat
      var selFC = [];
      var selP = [];
      dat.forEach(function(row){
        rowFC = row['FC']
        rowP = row['pval']
        if (rowP <= data.thP && data.thFC <= rowFC){
          selFC.push(rowFC);
          selP.push(rowP);
        }
      });

      var Traces = [];
      var tracePoints = {
        x: selFC,
        y: selP,
        mode: 'markers',
        marker: {
          color: 'black',
          size: 6
        },
      };
      Traces.push(tracePoints);
      Plotly.addTraces(el.id, Traces);

      var idRows = []
      for (a=0; a<data.dat.length; a++){
        idRows.push(data.dat[a]['ID'])
      }
      console.log(idRows)

      el.on('plotly_selected', function(e) {
        numSel = e.points.length
        Points = e.points
        selID = []
        for (a=0; a<numSel; a++){
          PN = Points[a].pointNumber
          selRow = idRows[PN]
          selID.push(selRow)
        }
        Shiny.onInputChange('selID', selID);
      })
      }", data = list(dat = dat, thP=threshP(), thFC=threshFC()))})

    selID <- reactive(input$selID)
    selDat <- reactive(dat[which(dat$ID %in% selID()), ])
    output$selectedValues <- renderPrint({str(selDat())})
})

shinyApp(ui, server)

库（ggplot2）
图书馆（绘本）
库（htmlwidgets）
ui您有一些有趣的问题

我做了一些小改动以帮助了解发生了什么：


调整了输入滑块的初始值
将输出更改为所选数据帧的
verbatumTextOutput
通过在跟踪定义中包含
text
字段，向工具提示（ID变量）添加了更多信息
在javascript控制台中打印出事件数据

从那里我可以看到经常（几乎总是，但不总是）有一种虚拟点作为第一个点。方便的是，它总是有
curveNumber
0


因此，我添加了一个防护，将其从所选列表中排除

我认为这解决了问题

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

ui <- shinyUI(fluidPage(
  sliderInput("threshP", "P-value:", min = 0, max = 1, value=1, step=0.05),
  sliderInput("threshFC", "Fold change:", min = 0, max = 10, value=0, step=0.5),
  plotlyOutput("plot1"),
  verbatimTextOutput("selectedValues")
))

server <- shinyServer(function(input, output) {
  set.seed(1)
  threshP <- reactive(input$threshP)
  threshFC <- reactive(input$threshFC)

  dat <- data.frame(ID = paste0("ID",1:10), FC=runif(10,0,10), pval=runif(10,0,1))
  dat$ID <- as.character(dat$ID)
  print(dat)

  # x-axis FC, y-axis pval
  xMax = max(dat$FC)
  xMin = min(dat$FC)
  yMax = max(dat$pval)
  yMin = min(dat$pval)

  df <- data.frame()
  p <- ggplot(df) + geom_point() + xlim(xMin, xMax) + ylim(yMin, yMax)
  gp <- ggplotly(p)

  output$plot1 <- renderPlotly({
    gp %>% onRender("
                    function(el, x, data) {
                    var dat = data.dat
                    var selFC = [];
                    var selP = [];
                    var sselID = [];
                    dat.forEach(function(row){
                    rowFC = row['FC']
                    rowP = row['pval']
                    rowID = row['ID']
                    if (rowP <= data.thP && data.thFC <= rowFC){
                    selFC.push(rowFC);
                    selP.push(rowP);
                    sselID.push(rowID);
                    }
                    });

                    var Traces = [];
                    var tracePoints = {
                    x: selFC,
                    y: selP,
                    text: sselID,
                    mode: 'markers',
                    marker: {
                    color: 'black',
                    size: 6
                    },
                    };
                    Traces.push(tracePoints);
                    Plotly.addTraces(el.id, Traces);

                    var idRows = []
                    for (a=0; a<data.dat.length; a++){
                    idRows.push(data.dat[a]['ID'])
                    }
                    console.log(idRows)

                    el.on('plotly_selected', function(e) {
                      console.log(e.points)
                      numSel = e.points.length
                      Points = e.points
                      selID = []
                      for (a=0; a<numSel; a++){
                      CN = Points[a].curveNumber
                      if (CN>0){
                        PN = Points[a].pointNumber
                        selRow = idRows[PN]
                        selID.push(selRow)
                      } 
                    }
                    Shiny.onInputChange('selID', selID);
                    })
                    }", data = list(dat = dat, thP=threshP(), thFC=threshFC()))})

  selID <- reactive(input$selID)
  selDat <- reactive(dat[which(dat$ID %in% selID()), ])
  output$selectedValues <- renderPrint({selDat()})
  })

shinyApp(ui, server)

库（ggplot2）
图书馆（绘本）
库（htmlwidgets）
ui您有一些有趣的问题

我做了一些小改动以帮助了解发生了什么：


调整了输入滑块的初始值
将输出更改为所选数据帧的
verbatumTextOutput
通过在跟踪定义中包含
text
字段，向工具提示（ID变量）添加了更多信息
在javascript控制台中打印出事件数据

从那里我可以看到经常（几乎总是，但不总是）有一种虚拟点作为第一个点。方便的是，它总是有
curveNumber
0


因此，我添加了一个防护，将其从所选列表中排除

我认为这解决了问题

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

ui <- shinyUI(fluidPage(
  sliderInput("threshP", "P-value:", min = 0, max = 1, value=1, step=0.05),
  sliderInput("threshFC", "Fold change:", min = 0, max = 10, value=0, step=0.5),
  plotlyOutput("plot1"),
  verbatimTextOutput("selectedValues")
))

server <- shinyServer(function(input, output) {
  set.seed(1)
  threshP <- reactive(input$threshP)
  threshFC <- reactive(input$threshFC)

  dat <- data.frame(ID = paste0("ID",1:10), FC=runif(10,0,10), pval=runif(10,0,1))
  dat$ID <- as.character(dat$ID)
  print(dat)

  # x-axis FC, y-axis pval
  xMax = max(dat$FC)
  xMin = min(dat$FC)
  yMax = max(dat$pval)
  yMin = min(dat$pval)

  df <- data.frame()
  p <- ggplot(df) + geom_point() + xlim(xMin, xMax) + ylim(yMin, yMax)
  gp <- ggplotly(p)

  output$plot1 <- renderPlotly({
    gp %>% onRender("
                    function(el, x, data) {
                    var dat = data.dat
                    var selFC = [];
                    var selP = [];
                    var sselID = [];
                    dat.forEach(function(row){
                    rowFC = row['FC']
                    rowP = row['pval']
                    rowID = row['ID']
                    if (rowP <= data.thP && data.thFC <= rowFC){
                    selFC.push(rowFC);
                    selP.push(rowP);
                    sselID.push(rowID);
                    }
                    });

                    var Traces = [];
                    var tracePoints = {
                    x: selFC,
                    y: selP,
                    text: sselID,
                    mode: 'markers',
                    marker: {
                    color: 'black',
                    size: 6
                    },
                    };
                    Traces.push(tracePoints);
                    Plotly.addTraces(el.id, Traces);

                    var idRows = []
                    for (a=0; a<data.dat.length; a++){
                    idRows.push(data.dat[a]['ID'])
                    }
                    console.log(idRows)

                    el.on('plotly_selected', function(e) {
                      console.log(e.points)
                      numSel = e.points.length
                      Points = e.points
                      selID = []
                      for (a=0; a<numSel; a++){
                      CN = Points[a].curveNumber
                      if (CN>0){
                        PN = Points[a].pointNumber
                        selRow = idRows[PN]
                        selID.push(selRow)
                      } 
                    }
                    Shiny.onInputChange('selID', selID);
                    })
                    }", data = list(dat = dat, thP=threshP(), thFC=threshFC()))})

  selID <- reactive(input$selID)
  selDat <- reactive(dat[which(dat$ID %in% selID()), ])
  output$selectedValues <- renderPrint({selDat()})
  })

shinyApp(ui, server)

库（ggplot2）
图书馆（绘本）
库（htmlwidgets）
谢谢。我喜欢工具提示文本和verbatumTextOutput。它真的有助于调试！我认为你发布的代码仍然有漏洞。我不认为我可以在评论中附加一个屏幕截图，但作为一个例子，如果我将p值设置为0.55，将fold change设置为0，并突出显示具有最低x轴值的三个点，那么这三个点中只有两个是正确的。不过，由于您的建议进行了更好的调试，我认为我已经找到了答案。我正在编辑中发布解决方案。再次感谢你对我的帮助！没问题，我也很好奇。是的，我明白你的意思。缩放时，这些点号是垃圾。我想你可以取点值，然后散列出来。也许先把它们围起来。看起来可能已经修好了。以后会解决的。非常感谢。我喜欢工具提示文本和verbatumTextOutput。它真的有助于调试！我认为你发布的代码仍然有漏洞。我不认为我可以在评论中附加一个屏幕截图，但作为一个例子，如果我将p值设置为0.55，将fold change设置为0，并突出显示具有最低x轴值的三个点，那么这三个点中只有两个是正确的。不过，由于您的建议进行了更好的调试，我认为我已经找到了答案。我正在编辑中发布解决方案。再次感谢你对我的帮助！没问题，我也很好奇。是的，我明白你的意思。缩放时，这些点号是垃圾。我想你可以取点值，然后散列出来。也许先把它们围起来。看起来可能已经修好了。以后会解决的。