javascript - 以交互方式向绘图 R 添加点，无需重绘背景图

Question

下面的 MWE 过于简化了我的真正目标。但是，我有一个需要很长时间才能绘制的背景图像(在下面的示例中，它只是 32 个 mtcars 数据集值的散点图)。用户可以单击我的背景图像中的某些点，这将导致绘制新的点。我的目标是这些新点只需在顶层重绘，而背景图像散点图不需要重绘，以节省时间和计算。

我的MWE如下:

library(plotly)
library(htmlwidgets)

g <- ggplot(mtcars, aes(x=mpg, y=cyl)) + geom_point()
gP <- ggplotly(g)

gP %>% onRender("
          function(el, x) {
            myGraph = document.getElementById(el.id);

            el.on('plotly_click', function(e) {

              console.log(e)
              console.log(e.points[0].x)

              var trace1 = {
                x: [e.points[0].x-.3, e.points[0].x-.3, e.points[0].x+.3, e.points[0].x+.3],
                y: [e.points[0].y-.3, e.points[0].y+.3, e.points[0].y-.3, e.points[0].y+.3],
                type: 'scatter',
                fillColor : 'red', 
                size: 20
              };

              Plotly.addTraces(el.id, trace1);
           })}
           ")

当用户单击 32 个黑点中的任何一个时，将在单击的黑点周围绘制四个红色点。这基本上是有效的，如果您单击 32 个黑色数据点中的任何一个，您应该会看到围绕它绘制的四个彩色点。然而，我仍然面临着几个问题:

1) 我怎样才能改进这个，使四个彩色点不被线连接？

2) 如何使 size 和 fillColor 真正起作用？当我更改它们的值时，我没有看到它们产生任何效果。

3) 这是使交互性和绘图尽可能快的合理语法吗？我很确定背景图像没有以有效的方式重新绘制，但很想听到有关它的确认，因为我是这种语法的新手。如果我要在顶层添加 100 个新点，这仍然有效吗？如果没有，我将很高兴听到有关改进语法的建议。

谢谢。

Answer 1

1) How can I improve this so that the four colored points are not connected by lines?

将 mode: 'markers' 添加到您的 trace 对象

2) How can I make the size and fillColor actually work? When I change their values, I do not see them have an effect.

这些值需要位于 marker 对象内，并且 fillColor 需要是 color。

marker: 
{
    color: 'red',   
    size: 20        
}

3) Is this a reasonable syntax to make the interactivity and drawing as fast as possible? I am pretty sure the background image is not being redrawn in an efficient manner but would love to hear confirmation about it as I am new to this syntax. If I were to add 100s of new points on the top layer, would this still be efficient? If not, I would be grateful to hear advice for recommendations for improved syntax.

这有点基于意见。问题是您使用 ggplot 创建模板，该模板创建了一个相当复杂的绘图。有了 100 分，每次点击后都会有相当长的延迟。

修复 x/y 轴范围将稍微改善绘图效果，因为如果新值超出旧值的范围，则需要调整图形大小。

gP %>% 
  layout(
    xaxis = list(range = c(8, 35)),
    yaxis = list(range = c(3, 9))
  )

如果您可以在不使用 ggplotly 的情况下绘制绘图，则只需创建一次跟踪，然后通过 extendTraces 附加值。

但我认为它已经是最好的了，最终它是一个基于浏览器的库，而不是一个独立的程序。

<小时/>

library(plotly)
library(htmlwidgets)

g <- ggplot(mtcars, aes(x=mpg, y=cyl)) + geom_point()
gP <- ggplotly(g)
gP %>% 
 layout(
    xaxis = list(range = c(8, 35)),
    yaxis = list(range = c(3, 9))
  )

gP %>% onRender("
function(el, x) {
  myGraph = document.getElementById(el.id);
  el.on('plotly_click', function(e) 
    {

      var trace1 = {
        x: [],
        y: [],
        mode: 'markers',
        marker: {
          color: 'red',   
          size: 20
        }
      };
      for (var i = 0; i < 100; i+= 1){
        trace1.x.push(e.points[0].x + Math.random() - 0.5)
        trace1.y.push(e.points[0].y + Math.random() - 0.5)
      }
    Plotly.addTraces(el.id, trace1);
  }
)}
")