onRender()函数htmlWidgets中Javascript代码的故障排除

Question

我试图在https://plot.ly/javascript/click-events/( RStudio )中重新创建一个名为“在单击事件上创建注释”的示例。在我的尝试中，我想出了以下定制的代码，用于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)我正在努力更好地理解如何对嵌入在htmlwidget的onRender()函数中的Javascript代码进行故障排除。是否有可能逐行运行这个代码，并说创建变量"pts“，看看它是如何在循环中更新的，以及当我单击某些点时注释变量是如何变化的？如果不能解决这种问题，我担心很难为我正在开发的交互式场景定制onRender()。我相信Javascript可以在Web浏览器中进行故障排除，但我不清楚如何使用这个特定的Javascript代码(嵌入在R中)。

谢谢你的建议！

编辑：

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

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

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

```{r setup, include=FALSE}

knitr::opts_chunk$set(echo =真)

```{r makePlot}

########### Ex:改变散射点不透明度###########

应该保持点击点黑色，但它会变成灰色

set.seed(1)

(剩下的代码在这里)

```

2)运行rmarkdown::render("annotate.Rmd")，它生成了.html文件

3)打开网址(file:///Users/user1835/annotate.html) in Chrome )

( 4)注意到交互情节已经在网页底部创建。我可以和它交互(如果我点击一个点，所有的点都会从黑色变成灰色)

5)点击Chrome右上角的图标->多个工具-> Developer Tools

此时，我无法确定如何使用可用的工具来解决这个问题。在我的Chrome浏览器中，我有如下内容(见图)：

​

​

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

任何建议都是非常感谢的！

Answer 1

为了排除这类代码的故障，我通常会将情节直接查看到浏览器中。如果您正在使用RStudio，您可以单击查看器顶部的“显示在新窗口”按钮，以便在浏览器中直接打开它。

否则，您还可以在代码中将viewer选项设置为NULL，并在浏览器中直接打开绘图。要做到这一点，您可以添加：

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

在plotto保存当前查看器选项并将其设置为null之前，以及

options("viewer"=default_viewer)

在您计划将其重置为默认之后。

在您的onRender函数中，您可以在运行代码时使用console.log将自定义消息打印到javascript控制台。如果您正在使用工具，您可以访问这个控制台。

您的代码本身存在一些问题。首先，括号并非都是封闭的。然后，而不是在最后一行的'myGraph'，它应该是id的div，其中的情节，所以在本例中的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查看器并不是百分之百地乐于推广JS对象。我有一些问题，我的传单地图工作在观众控制台不时.有些特性只是在rStudio中失败(不是编译后的版本，通常是正确的，但控制台版本可能不正确)。

我的解决方案是创建一个rMarkdown文档并将其输出指定为html。然后绘图，地图和图表离开。编制文档并在R& rStudio之外进行测试。

当您使用knitR运行该文件时，它会保存文档的web版本。打开Chrome，看看里面发生了什么。也就是说，如果你能让R把它呈现成HTML页面而没有错误.