r - 从浏览器中突出显示/查找散点图中的数据点

Question

我使用plotly和通用数据框生成了HTML格式的散点图。我知道在生成 HTML 绘图之前可以突出显示(例如使用不同的颜色)某些数据点。但是，我想知道是否可以在 HTML 文件中添加一个元素，使用户能够在生成绘图后根据其文本标签查找/突出显示某个数据点。

我用来生成数据帧和分散的代码:

tab <- data.frame(sample.id = pca$sample.id,
                  EV1 = pca$eigenvect[, 1],
                  EV2 = pca$eigenvect[, 2],
                  stringsAsFactors=F)

p <- plot_ly(tab, x=tab$EV1, y=tab$EV2, text=tab$sample.id)
p <- layout(p, title="PCA", xaxis=list(title="PC 1"),
          yaxis=list(title="PC 2"))

htmlwidgets::saveWidget(as.widget(p), paste(output_name, ".html", sep=""))

Answer 1

据我所知，Plotly 中没有内置功能，但您只需要几行 Javascript 代码即可获得该功能。

Plotly 将数据存储在 HTML 文件的 application/json 对象中。您可以通过

获取数据

var data = JSON.parse(document.querySelectorAll("script[type='application/json']")[0].innerHTML);

文本元素存储在

中

data.x.data[i].text[j]

其中 i 是迹线编号，j 是点编号。

现在我们需要一个文本字段和一个按钮，我们可以使用 htmltools 来实现此目的

p <- htmlwidgets::appendContent(p, htmltools::tags$input(id='inputText', value='Merc', ''), htmltools::tags$button(id='buttonSearch', 'Search'))

让我们向触发 hover event 的按钮添加一个事件列表。第一条迹线的第一个点。

p <- htmlwidgets::appendContent(p, htmltools::tags$script(HTML(
  'document.getElementById("buttonSearch").addEventListener("click", function() 
    {
    var myDiv = document.getElementsByClassName("js-plotly-plot")[0]
    Plotly.Fx.hover(myDiv, [{curveNumber: 0, pointNumber: 0}]);
    }
  )
')))    

整个代码搜索所有文本标签，并在标签中找到输入的文本时触发悬停事件。

library(plotly)
library(htmlwidgets)
library(htmltools)

pcaCars <- princomp(mtcars, cor = TRUE)
carsHC <- hclust(dist(pcaCars$scores), method = "ward.D2")

carsDf <- data.frame(pcaCars$scores, "cluster" = factor(carsClusters))
carsClusters <- cutree(carsHC, k = 3)

carsDf <- transform(carsDf, cluster_name = paste("Cluster", carsClusters))

p <- plot_ly(carsDf, x = ~Comp.1 , y = ~Comp.2, text = rownames(carsDf),
             mode = "markers", color = ~cluster_name, marker = list(size = 11), type = 'scatter', mode = 'markers')

p <- htmlwidgets::appendContent(p, htmltools::tags$input(id='inputText', value='Merc', ''), htmltools::tags$button(id='buttonSearch', 'Search'))
p <- htmlwidgets::appendContent(p, htmltools::tags$script(HTML(
  'document.getElementById("buttonSearch").addEventListener("click", function()
    {        
      var i = 0;
     var j = 0;
      var found = [];
      var myDiv = document.getElementsByClassName("js-plotly-plot")[0]
      var data = JSON.parse(document.querySelectorAll("script[type=\'application/json\']")[0].innerHTML);
      for (i = 0 ;i < data.x.data.length; i += 1) {
        for (j = 0; j < data.x.data[i].text.length; j += 1) {
          if (data.x.data[i].text[j].indexOf(document.getElementById("inputText").value) !== -1) {
            found.push({curveNumber: i, pointNumber: j});
          }
        }
      }
      Plotly.Fx.hover(myDiv, found);
    }  
  );')))                                                    

htmlwidgets::saveWidget(p, paste('pca', ".html", sep=""))
p

PCA 实现修改自 here .