Highlight/find 数据点在浏览器中散布

Question

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

我用来生成数据框和散点图的代码：

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。

Highlight/find 数据点在浏览器中散布

Highlight/find data points in plotly scatter from the browser

r

plotly

scatter