javascript - 在 htmlWidgets 的 onRender() 中修改选定点的有效方法

Question

我正在制作一个交互式图形，为 2 个定量变量(A 和 B)绘制黑点。用户可以选择阈值。执行此操作后，仅绘制高于阈值幅度的点，并且还绘制表示未通过阈值的区域的灰色矩形。这一切似乎运行良好。

但是，我现在想要实现的是允许用户选择某些点。执行此操作时，所选点应从黑色变为红色。当用户选择新的点子集时，先前选择的点从红色返回到黑色。换句话说，图中唯一显示红色的点应该是最后选择的点。

不幸的是，这部分似乎不起作用。目前的问题是:

1) 选定的点永久保持红色。2) 如果选择了已经是红色的点，有时未选择的黑点会变成红色。您可以在帖子底部看到此错误的示例(在图片中)。

我相信这种情况正在发生，因为我只是绘制了与所选 x 和 y 值相对应的全新红点轨迹(这在下面的代码中注释为“//以红色添加用户选择的点”)。因此，红点成为它们自己的实体。

我的问题是:解决这个问题的有效方法是什么(以便选定的点变成红色，直到选择另一个子集？)我使用术语“高效”，因为我正在处理大型数据集(100-1,000 个点) ，所以我正在寻找节省计算速度的方法。简单地将选定的黑点修改为红色而不是完全重绘叠加的红点可能更有效？但是，我不确定如何使用 Plotly 跟踪语法来实现这一点。

任何帮助将不胜感激。

下面是我的脚本的简化版本。

library(plotly)
library(GGally)
library(htmlwidgets)

ui <- shinyUI(fluidPage(
  sliderInput("thresh", "Threshold:", min = 0, max = 3, value=1, step=1),
  plotlyOutput("myPlot"),
  textOutput("selectedValues")
))

server <- shinyServer(function(input, output) {
  thresh <- reactive(input$thresh)

  set.seed(1)
  dat <- data.frame(Row = paste0("Row",sample(c(1:20),20)), A=4*rnorm(20), B=4*rnorm(20))
  dat$Row <- as.character(dat$Row)

  minVal = min(dat[,-1])
  maxVal = max(dat[,-1])

  gg <- ggplot(data = dat, aes(x=A, y=B)) + coord_cartesian(xlim = c(minVal, maxVal), ylim = c(minVal, maxVal))

  ggY <- ggplotly(gg)

  output$myPlot <- renderPlotly(ggY %>% onRender("
    function(el, x, data) {
    var Points = [];
    var Traces = [];
    var selRows = [];

    data.dat.forEach(function(row){
    if(Math.abs(row['B']) > data.thresh) selRows.push(row);});

    var xArr = [];
    var yArr = [];
    var keepIndex = [];
    for (a=0; a<selRows.length; a++){
      xArr.push(selRows[a]['A'])
      yArr.push(selRows[a]['B'])
      keepIndex.push(selRows[a]['Row'])
    }
    Points.push(keepIndex);

    // Add points above the threshold in black
    var tracePoints = {
      x: xArr,
      y: yArr,
      hoverinfo: 'none',
      mode: 'markers',
      marker: {
        color: 'black',
        size: 4
      }
    };

    // Add upper horizontal line of gray box
    var hiLine = {
      x: [-15,15],
      y: [data.thresh,data.thresh],
      mode: 'lines',
      line: {
        color: 'gray',
        width: 1
      },
      opacity: 0.25,
      hoverinfo: 'none'
    };

    // Add lower horizontal line of gray box
    var lowLine = {
      x: [-15,15],
      y: [-1*data.thresh,-1*data.thresh],
      mode: 'lines',
      fill: 'tonexty',
      line: {
        color: 'gray',
        width: 1
      },
      opacity: 0.25,
      hoverinfo: 'none'
    };

    Traces.push(tracePoints);
    Traces.push(hiLine);
    Traces.push(lowLine);
    Plotly.addTraces(el.id, Traces);

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

    el.on('plotly_selected', function(e) {
      numSel = e.points.length
      cN = e.points[0].curveNumber;

      var pointNumbers = [];
      var selData = [];
      for (a=0; a<numSel; a++){
        pointNumbers.push(e.points[a].pointNumber)
        selData.push(data.dat[idRows.indexOf(Points[0][pointNumbers[a]])])
      }
      Shiny.onInputChange('selData', selData);
      var Traces = [];
      var xArr = [];
      var yArr = [];
      for (a=0; a<selData.length; a++){
        xArr.push(selData[a]['A'])
        yArr.push(selData[a]['B'])
      }

      // Add user-selected points in red
      var traceRed = {
        x: xArr,
        y: yArr,
        mode: 'markers',
        marker: {
          color: 'red',
          size: 4
        },
        hoverinfo: 'none'
      };
      Traces.push(traceRed);

      Plotly.addTraces(el.id, Traces);
    })

    }", data = list(dat=dat, thresh=thresh())))

  selData <- reactive(input$selData)
  output$selectedValues <- renderPrint({selData()})

})

shinyApp(ui, server)

以下是错误示例:

比如说，我使用所有默认设置打开应用程序，然后简单地通过绘图选择最右边的四个点。结果看起来不错，因为只有这四个点被涂成红色，如下所示:

现在，假设我重新选择前四点。结果看起来不再很好，因为即使这四个点被涂成红色，另外两个点也被错误地涂成红色:

Answer 1

处理此问题的最简单方法是简单地跟踪您是否选择了某些内容，并删除包含先前选择的点的先前轨迹。为了实现这一目标，进行了以下更改:

• 添加了一个计数器nseltrace来跟踪我们选择事物的频率
• 添加了 Plotly.deleteTraces 语句来删除最后一条跟踪(可以使用索引 -1 指定。
• 该删除操作由 if (nseltrace>0) 语句保护。
• 重新格式化您的选择点，将它们放入数据框中(它们作为字符向量组合在一起)
• 使用 verbatumTextOutput 来打印它们，因为它是一种更清晰的格式。

更新:

• 添加了一个守卫，使其仅选择属于curveNumber 1 的点，即原始数据，而不是随后选定的迹线。这导致已选择的点在新选择的列表中输入两次。

至于这是否是最有效的方法，显然取决于情况。您正在将选定的点绘制在之前未选定的表示上，最坏的情况将是两倍，但点绘制速度非常快，并且一小部分点的典型减速可能甚至无法测量。我不会对此进行优化，除非后来证明它是一个问题，然后我会使用最新的plotly，因为plotly代码库中当前正在进行大量优化(和错误删除)。

这是代码:

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

ui <- shinyUI(fluidPage(
  sliderInput("thresh", "Threshold:", min = 0, max = 3, value=1, step=1),
  plotlyOutput("myPlot"),
  verbatimTextOutput("selectedValues")
))

server <- shinyServer(function(input, output) {
  thresh <- reactive(input$thresh)

  set.seed(1)
  dat <- data.frame(Row = paste0("Row",sample(c(1:20),20)), A=4*rnorm(20), B=4*rnorm(20))
  dat$Row <- as.character(dat$Row)

  minVal = min(dat[,-1])
  maxVal = max(dat[,-1])

  gg <- ggplot(data = dat, aes(x=A, y=B)) + coord_cartesian(xlim = c(minVal, maxVal), ylim = c(minVal, maxVal))

  ggY <- ggplotly(gg)

  output$myPlot <- renderPlotly(ggY %>% onRender("
                                                 function(el, x, data) {
                                                 var Points = [];
                                                 var Traces = [];
                                                 var selRows = [];

                                                 data.dat.forEach(function(row){
                                                 if(Math.abs(row['B']) > data.thresh) selRows.push(row);});

                                                 var xArr = [];
                                                 var yArr = [];
                                                 var keepIndex = [];
                                                 for (a=0; a<selRows.length; a++){
                                                 xArr.push(selRows[a]['A'])
                                                 yArr.push(selRows[a]['B'])
                                                 keepIndex.push(selRows[a]['Row'])
                                                 }
                                                 Points.push(keepIndex);

                                                 // Add points above the threshold in black
                                                 var tracePoints = {
                                                 x: xArr,
                                                 y: yArr,
                                                 hoverinfo: 'none',
                                                 mode: 'markers',
                                                 marker: {
                                                 color: 'black',
                                                 size: 4
                                                 }
                                                 };

                                                 // Add upper horizontal line of gray box
                                                 var hiLine = {
                                                 x: [-15,15],
                                                 y: [data.thresh,data.thresh],
                                                 mode: 'lines',
                                                 line: {
                                                 color: 'gray',
                                                 width: 1
                                                 },
                                                 opacity: 0.25,
                                                 hoverinfo: 'none'
                                                 };

                                                 // Add lower horizontal line of gray box
                                                 var lowLine = {
                                                 x: [-15,15],
                                                 y: [-1*data.thresh,-1*data.thresh],
                                                 mode: 'lines',
                                                 fill: 'tonexty',
                                                 line: {
                                                 color: 'gray',
                                                 width: 1
                                                 },
                                                 opacity: 0.25,
                                                 hoverinfo: 'none'
                                                 };

                                                 Traces.push(tracePoints);
                                                 Traces.push(hiLine);
                                                 Traces.push(lowLine);
                                                 Plotly.addTraces(el.id, Traces);

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

                                                 var nseltrace = 0;
                                                 el.on('plotly_selected', function(e) {
                                                 console.log(e.points)
                                                 numSel = e.points.length

                                                 var pointNumbers = [];
                                                 var selData = [];
                                                 for (a=0; a<numSel; a++){
                                                   if (e.points[a].curveNumber==1){  // restrict to points in the original curve
                                                     pointNumbers.push(e.points[a].pointNumber)
                                                     selData.push(data.dat[idRows.indexOf(Points[0][pointNumbers[a]])])
                                                   }
                                                 }
                                                 Shiny.onInputChange('selData', selData);
                                                 var Traces = [];
                                                 var xArr = [];
                                                 var yArr = [];
                                                 for (a=0; a<selData.length; a++){
                                                 xArr.push(selData[a]['A'])
                                                 yArr.push(selData[a]['B'])
                                                 }

                                                 // Add user-selected points in red
                                                 var traceRed = {
                                                 x: xArr,
                                                 y: yArr,
                                                 mode: 'markers',
                                                 marker: {
                                                 color: 'red',
                                                 size: 4
                                                 },
                                                 hoverinfo: 'none'
                                                 };

                                                 if (nseltrace>0){
                                                 Plotly.deleteTraces(el.id,-1)
                                                 }
                                                 Traces.push(traceRed);
                                                 nseltrace = nseltrace+1

                                                 Plotly.addTraces(el.id, Traces);
                                                 })

                                                 }", data = list(dat=dat, thresh=thresh())))

  selData <- reactive({
    req(input$selData)
    rawc <- input$selData
    df <- data.frame(t(matrix(rawc,nrow=3)))
    names(df) <- names(rawc)[1:3]
    df
  })
  output$selectedValues <- renderPrint({selData()})

})

shinyApp(ui, server)

这是一个屏幕截图: