排查 htmlWidgets 的 onRender() 函数中的 Javascript 代码

Question

我正在尝试在 RStudio 中的 (https://plot.ly/javascript/click-events/) 处重新创建名为“在单击事件上创建注释”的示例。在我的尝试中，我想出了以下在 RStudio 中使用的定制代码：

library(plotly)

trace_0 <- rnorm(100, mean = 5)
trace_1 <- rnorm(100, mean = 0)
trace_2 <- rnorm(100, mean = -5)
x <- c(1:100)

data <- data.frame(x, trace_0, trace_1, trace_2)

data %>% plot_ly(x = ~x, y = ~trace_0, name = 'trace 0', type = 'scatter', mode = 'lines') %>%
  layout(hovermode = "closest", showlegend = FALSE) %>%
  onRender("
           function(el, x) {
           var myGraph = document.getElementById(el.id);
           el.on('plotly_click', function(e) {
            var pts = '';
            for(var i=0; i < e.points.length; i++){
              annotate_text = 'x = '+e.points[i].x +
              'y = '+e.points[i].y.toPrecision(4);

              annotation = {
                text: annotate_text,
                x: e.points[i].x,
                y: parseFloat(e.points[i].y.toPrecision(4))
              }

              annotations = self.layout.annotations || [];
              annotations.push(annotation);
              Plotly.relayout('myGraph',{annotations: annotations})
            }
           }
          ")

在 RStudio 中运行我的代码后，我确实在绘图查看器中看到了交互式绘图图像，但我无法创建与它交互时应该出现的任何注释（如在线教程中）。

我的问题分为两部分。

1) 我正在尝试找出如何排除故障并解决这个特定问题。

2) 我试图更好地理解如何对嵌入在 htmlwidgets 的 onRender() 函数中的 Javascript 代码进行故障排除。是否可以逐行运行此代码并说创建变量“pts”并查看它在通过循环时如何更新，并查看当我单击某些点时注释变量如何变化？如果无法通过这种方式进行故障排除，我担心为我正在开发的交互式绘图定制 onRender() 会很困难。我相信可以在 Web 浏览器中对 Javascript 进行故障排除，但我不清楚如何使用这个特定的 Javascript 代码（嵌入在 R 中）来解决问题。

感谢您的建议！

编辑：

考虑到@bethanyP 的一些建议，我尝试了以下方法：

1) 制作了如下格式的 .Rmd 文件：

---
title: "annotePlot"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{r makePlot}
########### Ex: Change scatterplot opacity ###########
# Supposed to keep clicked point black, but it turns all gray
set.seed(1)
(Rest of code in here)
````

2) Ran rmarkdown::render("annotate.Rmd") 生成.html文件

3) 在 Chrome 中打开 URL (file:///Users/user1835/annotate.html)

4) 注意到交互图已经在网页底部创建。我可以与之交互（如果我点击一个点，所有点都会从黑色变为灰色）

5) 点击 Chrome 右上角的图标 --> 更多工具 --> 开发者工具

此时，我不确定如何使用可用工具来解决问题。我的 Chrome 浏览器中有如下内容（见图）：

当我点击图表中的一个点时，我会看到标签突出显示。但是，我无法看到有关单个对象（例如 e）的更多信息。我不确定我怎么会知道对象 e 有一个称为点的子对象。此外，我不确定当用户单击某个点时如何查看哪些对象更新（以及更新的方式）。我有可能看到这样的事情吗？我相信我需要了解这些对象并了解它们在与之交互时如何变化。

非常感谢任何建议！

Answer 1

为了解决这类代码，我通常直接在浏览器中查看绘图。如果您使用的是 RStudio，您可以点击查看器顶部的“在新窗口中显示”按钮，直接在浏览器中打开它。

否则，您也可以在代码中将viewer 选项设置为NULL，绘图将直接在浏览器中打开。为此，您可以添加：

default_viewer = getOption("viewer")
options("viewer"=NULL)

在您的绘图之前保存当前查看器选项并将其设置为空，并且

options("viewer"=default_viewer)

在你的情节之后将其重置为默认值。

在您的onRender 函数中，您可以在代码运行时使用console.log 将自定义消息打印到javascript 控制台。如果您使用的是 Chrome 开发人员工具，则可以访问此控制台。

您的代码本身存在一些问题。首先，括号不是全部闭合的。那么最后一行的 'myGraph' 应该是 div 的 id，而不是最后一行，所以在这种情况下是 el.id。

这是一个工作函数：

onRender("
           function(el, x) {
           var myGraph = document.getElementById(el.id);
           el.on('plotly_click', function(e) {
            var pts = '';
            for(var i=0; i < e.points.length; i++){
            var annotate_text = 'x = '+e.points[i].x +
            'y = '+e.points[i].y.toPrecision(4);

             var annotation = {
            text: annotate_text,
            x: e.points[i].x,
             y: parseFloat(e.points[i].y.toPrecision(4))
             }

            annotations = el.layout.annotations || [];
            annotations.push(annotation);
            Plotly.relayout(el.id,{annotations: annotations})
            }
           })}
           ") 

Answer 2

这可能看起来很复杂，但我必须使用 Javascript 和 R 的最佳工具是在 chrome 的检查器中，所以我将图形导出为网页。您实际上可以通过这种方式编辑和重新运行代码，以找出 Javascript 问题所在。

另外，我发现 rStudio 查看器并不是 100% 乐于推广 JS 对象。我的 Leaflet 地图不时在查看器控制台中工作时遇到一些问题。有些功能在 rStudio 中失败（不是编译版本，通常是正确的，但控制台版本可能不是）。

我的解决方案是创建一个 rMarkdown 文档并将其输出指定为 html。然后绘制、映射和绘制图形。编写文档并在 R & rStudio 之外对其进行测试。

当您使用 knitR 运行该文件时，它会保存您文档的 Web 版本。在 Chrome 中打开它，看看那里发生了什么。也就是说，如果您可以让 R 将其呈现为 HTML 页面而不会出现错误...