Question

我正在制作一个交互式图形，绘制2个定量变量（A和B）的黑点。用户可以选择阈值。在这样做之后，仅绘制高于该阈值幅度的点，并且还绘制表示阈值未通过的区域的灰色矩形。这一切似乎都很好。

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

不幸的是，这部分似乎没有用。现在的问题是：

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

我相信这种情况正在发生，因为我只是简单地绘制了一个与所选x和y值相对应的全新红点（这在下面的代码中注释为＆＃34; //在红色中添加用户选择的点＆＃34）。因此，红点成为他们自己的实体。

我的问题是：什么是解决此问题的有效方法（以便选定的点变为红色，直到选择另一个子集？）我使用术语高效，因为我正在处理大型数据集（100-1,000s点），所以我正在寻找节省计算速度的方法。简单地将选定的黑点修改为红色而不是完全重绘叠加的红点可能更有效？但是，我不确定如何使用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)

以下是错误示例：

说，我打开应用程序的所有默认值，我只是Plotly-选择前四个正确的点。结果看起来很好，因为只有这四个点是红色的，如下所示：

现在，我说重新选择前四点。结果不再好看，因为即使这四个点都是红色的，另外两个点也被错误地涂成了红色：

Answer 1

处理此问题的简单方法是简单地跟踪您是否选择了某些内容，并删除包含所选点的上一个跟踪（如果有先前的选择）。为此，进行了以下更改：

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

更新

添加了一个防护，只让它选择属于curveNumber 1的点，即原始数据，而不是后面的选定跟踪。这导致已经选择的点在新选择的列表中输入两次。

至于这是否是最有效的方式，显然取决于。您正在绘制先前未选择的表示的选定点，最坏情况将是两倍，但点绘制非常快，并且对于一小部分点的典型减速甚至可能无法测量。我不会对此进行优化，除非事后证明这是一个问题，然后我会使用最新的情节，因为目前在剧情代码库中有很多优化（和删除bug）。

以下是代码：

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)

这是一个截图：

修改htmlWidgets

1 个答案:

更新