`facet_wrap()` with `scales = "free_x"` squishes middle facets

オープン
#2,453 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
45/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
静か
技術スタック
javascript, r

調査の方向性

まず、提供されている R/Shiny MWE を ggplot2、plotly、facet_wrap(scales = "free_x") とともに実行し、その後、Shiny の外部でリサイズの一連の操作を再現します。生成されたプロットのレイアウトと、リサイズ中のレスポンシブな挙動を調査します。中央の facet 行が期待される高さを維持し、リサイズ後に余白が現れなければ完了です。

索引モデルが issue の本文から書いたものです。

説明

Summary

When using facet_wrap() with scales = "free_x", the middle facets rows appear squished.

MWE

This bug is most apparent when working in Shiny contexts:

library(ggplot2)
library(shiny)
library(plotly)

ui <- fluidPage(
  plotlyOutput("p", height = "800px")
)

server <- function(input, output, session) {
  output$p <- renderPlotly({
    plt <- palmerpenguins::penguins |>
      ggplot(
        aes(x = sex)
      ) +
      geom_bar() +
      facet_wrap(
        ggplot2::vars(species, island, year),
        ncol = 2,
        axes = "all",
        scales = "free_x" # or "free"
      )

    plotly::ggplotly(plt)
  })
}

shinyApp(ui, server)

The result is an output where the first and last row of facets look correct, but all the middle facet rows are squished and there's a bunch of whitespace inbetween:

Image

Interestingly, if you use scales = "free_y" or scales = "fixed", the bug is not triggered:

Image

Potential Cause

I believe this is an issue with the responsivity / css of the resulting plot. You can get this to trigger outside of shiny, by doing the following:

  1. Size your plot output window to result in a squished output, and run the following:
plt <- palmerpenguins::penguins |>
  ggplot(
    aes(x = sex)
  ) +
  geom_bar() +
  facet_wrap(
    ggplot2::vars(species, island, year),
    ncol = 2,
    axes = "all",
    scales = "free_x"
  )

plotly::ggplotly(plt)

Result:

Image
  1. Resize the plot window by increasing the height, and you get the weird result:
Image
  1. Key observation: if you now re-run the code from step 1, with the window height already tall, it renders correctly:
Image

This is why I think there's responsivity / css thing going on here -- I imagine Shiny is rendering to a smaller height, then resizing to fill the space of the div. Responsivity is broken, triggering the weird result.

Thanks for looking in to this!

主要言語
R
スター
2.7k
フォーク
641
PR マージ指標
30日以内にマージされた PR はありません

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

plotly/plotly.R のほかの issue

plotly/plotly.R の issue をすべて見る

似ている issue

R の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。