R语言为Plotly散点图添加搜索栏失败，求解决方法

问题原因分析 #

你遇到的搜索栏不显示问题，主要由以下几个错误导致：

1. 变量定义顺序错误：代码中先使用carsClusters创建carsDf，但carsClusters是之后才通过cutree定义的，这会导致初始数据框创建逻辑错误，影响后续渲染。
2. JavaScript引号冲突：嵌入的脚本中，script[type='application/json']使用了单引号，而整个脚本字符串是用单引号包裹的，导致浏览器解析脚本时出现语法错误，中断了HTML元素的加载。
3. Plotly对象渲染方式问题：直接在RStudio中查看plotly对象时，可能无法正确渲染附加的HTML元素，需要通过浏览器打开生成的HTML文件，或使用browsable()强制渲染。

修复后的完整代码 #

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

# 修正变量定义顺序：先计算聚类结果，再创建数据框
pcaCars <- princomp(mtcars, cor = TRUE)
carsHC <- hclust(dist(pcaCars$scores), method = "ward.D2")
carsClusters <- cutree(carsHC, k = 3)  # 先定义聚类结果
carsDf <- data.frame(pcaCars$scores, "cluster" = factor(carsClusters))
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))

# 组合plotly对象与搜索栏HTML元素，避免渲染问题
ui <- tagList(
  p,
  tags$input(id='inputText', value='Merc', type='text'),
  tags$button(id='buttonSearch', 'Search'),
  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);
    });'
  ))
)

# 保存为HTML文件，或在RStudio中用browsable查看
htmlwidgets::saveWidget(browsable(ui), 'pca.html')
browsable(ui)

注意事项 #

• 运行代码后，优先通过浏览器打开生成的pca.html文件，才能确保搜索栏和交互功能正常工作。
• 如果在RStudio中查看，必须用browsable()包裹UI组合对象，否则可能无法显示附加的HTML元素。

内容的提问来源于stack exchange，提问作者stats_noob