Question

我正在尝试重新创建名为＆＃34;在点击事件＆＃34;上创建注释的示例; at（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）我试图更好地理解如何解决嵌入在htmlwidgets的onRender（）函数中的Javascript代码。是否可以逐行运行此代码并说创建变量＆＃34; pts＆＃34;并查看它在循环中如何更新并查看当我点击某些点时注释变量如何变化？如果不能以这种方式排除故障，我担心很难为我正在开发的交互式图块定制onRender（）。我相信Javascript可以在Web浏览器中进行故障排除，但我不清楚如何使用这个特定的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）ramarkr :: render（＆＃34; annotate.Rmd＆＃34;）制作了.html文件

3）在Chrome中打开网址（文件：///Users/user1835/annotate.html）

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

5）点击Chrome右上角的图标 - ＆gt;更多工具 - ＆gt;开发人员工具

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

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

非常感谢任何建议！

Answer 1

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

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

我的解决方案是创建一个rMarkdown文档并将其输出指定为html。然后绘制，绘图和绘图。编织文件并在R＆amp; S; rStudio。

使用knitR运行文件时，会保存文档的Web版本。在Chrome中打开它，看看那里发生了什么。也就是说，如果你可以让R把它渲染成一个没有错误的HTML页面......

Answer 2

要对这种代码进行故障排除，我通常会直接在浏览器中查看该图。如果您使用的是RStudio，可以单击查看器顶部的“在新窗口中显示”按钮，直接在浏览器中打开它。

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

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

在您的绘图之前

保存当前查看器选项并将其设置为null，并

options("viewer"=default_viewer)

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

在onRender功能中，您可以使用console.log在运行代码时将自定义消息打印到javascript控制台。您可以在Chrome开发者工具中访问此控制台，如果您正在使用它。

您的代码本身存在一些问题。首先，括号并非全部关闭。然后，在最后一行，而不是'myGraph'，它应该是制作绘图的id的{{1}}，因此在这种情况下div。

这是一个有效的功能：

el.id

对htmlWidgets

2 个答案: