sheet - shiny r

La interacción de Flexdashboard/plotly da como resultado un comportamiento extraño en la barra de desplazamiento

Question

Tengo un problema extraño y muy frustrante. Cuando construyo gráficos de trama en storyboards (del paquete flexdashboard), obtengo una barra de desplazamiento muy molesta y totalmente innecesaria en mi leyenda. Cuando alguien intenta hacer clic en uno de los puntos, la barra de desplazamiento se contrae y es prácticamente imposible hacer clic en el objeto. Esta barra de desplazamiento solo aparece cuando la pestaña con el gráfico de trazado no se ve inmediatamente durante la carga de la página, es decir, si la página se carga con alguna otra pestaña seleccionada.

Puedo hacer el mismo gráfico fuera del guión gráfico, sin problemas en RStudio, o guardarlo como un htmlwidget y cargarlo en Chrome. Pero cuando cargo mi storyboard, ya sea en RStudio o en Chrome, obtengo esta molesta barra de desplazamiento. La barra de desplazamiento existe ya sea una leyenda vertical u horizontal.

Los objetos ggplotly no tienen este problema.

Aquí hay un ejemplo de la barra de desplazamiento innecesaria. El gráfico ggplotly está bien, y el gráfico tiene la barra de desplazamiento.

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
---

```{r setup, include=FALSE}
library(flexdashboard)
```

### ggplot

```{r}

library(plotly)

carggplot <- ggplot(mtcars, aes(hp, mpg, fill = as.factor(carb))) +
    geom_point() +
    theme_bw()

ggplotly(carggplot)
```


### plotly

```{r}
carsplot <- plot_ly(
    data = mtcars,
    x = ~hp,
    y = ~mpg,
    color = ~as.factor(carb),
    type = "scatter",
    mode = "markers"
    )

carsplot
```

No he podido encontrar ninguna documentación sobre este tema, aunque encontré un problema similar publicado por alguien utilizando la interfaz de Python para trazar.

Estoy buscando una manera de desactivar la barra de desplazamiento por completo (manteniendo la leyenda), o alguna explicación del comportamiento nervioso de la barra de desplazamiento.

flexdashboard es 0.5, plotly es 4.7.1, R es 64 bit 3.4.1, Windows 7.

Answer 1

Hay un montón de partes en movimiento para responder a su pregunta. No cubriré cada uno en detalle, sino que los tocaré brevemente.

Fondo

1. El diagrama de plotly.js se comporta como se diseñó cuando la longitud de la leyenda se alarga, inserta automáticamente la barra de desplazamiento.

2. Esto no está sucediendo con el diagrama ggplotly porque todo el estilo visual proviene del objeto ggplot .

3. En este caso, flexdashboard es el culpable por la forma en que se ajusta dinámicamente el espacio disponible y por informar a plotly.js sobre cómo renderizar. Vale la pena señalar que esto aparece como SVG en la fuente html.

4. La solución es manipular el DOM para ocultar / eliminar / alterar el elemento problemático.

Solucion potencial

La solución que ofrezco a continuación es, por lo tanto, un poco hack. Una solución más permanente puede ser presentar un problema a la gente buena de RStudio para ver si se puede hacer algún cambio en el paquete, que resuelve su problema.

Si agrega runtime: shiny a su encabezado YAML , puede utilizar el excelente paquete shinyjs de Dean Attali . Si bien no soy un experto en este espacio, he agregado algunas líneas a su MRE que eliminan los elementos <rect> del SVG de la class=scrollbar . Es importante tener en cuenta que puede necesitar modificar el javascript que ofrezco para ser más específico y no eliminar los elementos que pueda desear conservar.

Actualizar a MRE

Aquí está el código Rmd con comentarios donde hice cambios.

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
  runtime: shiny
---

```{r setup, include=FALSE}
library(shinyjs)        # add package, note runtime option above in YAML
useShinyjs(rmd = TRUE)  # function needs to initialise js

library(flexdashboard)
library(plotly)
```

### ggplot

```{r}

library(plotly)

carggplot <- ggplot(mtcars, aes(hp, mpg, fill = as.factor(carb))) +
    geom_point() +
    theme_bw()

ggplotly(carggplot)
```


### plotly

```{r}
carsplot <- plot_ly(
    data = mtcars,
    x = ~hp,
    y = ~mpg,
    color = ~as.factor(carb),
    type = "scatter",
    mode = "markers"
    )

carsplot

runjs("$svg.selectAll(''rect[class=scrollbar]'').remove();") # run plain js to remove elements
```

NB Cuando publico esto, he tenido resultados poco confiables y profundizaré más.

Answer 2

Una vieja pregunta, pero si otros tienen el mismo problema, quería obtener mi solución ...

Tuve el mismo problema y lo resolví con este enfoque:

ggplotly(carggplot, height = 500)

Tenía una mini barra de desplazamiento en mi leyenda y ajustando la altura como arriba mientras llamaba a ggplotly() , me permitía ajustarme a la altura correcta necesaria para que todo funcionara.