如何调整包含绘图的 div 以绘制尺寸，使其不与文档重叠

Posted 2023-02-18

【中文标题】如何调整包含绘图的 div 以绘制尺寸，使其不与文档重叠

【英文标题】：How to adjust div containing plotly to plot dimensions so it does not overlap document

【发布时间】：2021-10-10 06:12:05

【问题描述】：

我正在使用 plotly 在 RMarkdown 中生成绘图。 但是，由于它嵌入在 div 中，因此与以下文本重叠。 我认为这是因为 plotly size 和 div 之间的冲突。

  ---
    title: "TITLE"
    author: "AUTHOR"
    date: "1/1/2000"
    output:
      html_document
    ---
    
    ```r setup, include=FALSE
    knitr::opts_chunk$set(
      warning = FALSE,
      message = FALSE,
      echo = FALSE  # show R code
    )
    
    ```
    ## scatter 1
    
    ```r, echo=FALSE, eval=TRUE,out.,out.,fig.align='center'
    library(plotly)
    library(htmltools)
    mtcars$am[which(mtcars$am == 0)] <- 'Automatic'
    mtcars$am[which(mtcars$am == 1)] <- 'Manual'
    mtcars$am <- as.factor(mtcars$am)
    
    fig <- plot_ly(mtcars, x = ~wt, y = ~hp, z = ~qsec, color = ~am, colors = c('#BF382A', '#0C4B8E'))
    fig <- fig %>% add_markers()
    fig <- fig %>% layout(scene = list(xaxis = list(title = 'Weight'),
                         yaxis = list(title = 'Gross horsepower'),
                         zaxis = list(title = '1/4 mile time')))
    
    
    fig %>% layout(autosize = F, width = 1000, height = 800,paper_bgcolor = 'rgb(243, 243, 243)', margin = list(r = 10,t = 25,b = 40,l = 110)) -> p
    
    div(p,align='center')
    ```
# HEADING
    
asdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasda

如您所见，文本已隐藏。如何调整 div 属性使其可见？

【参考方案1】：

从块选项中删除out.height="100%"。

另外，在plotly 函数中设置宽度和高度，而不是在layout 中。

---
title: "TITLE"
author: "AUTHOR"
date: "1/1/2000"
output: html_document
---

```r setup, include=FALSE
knitr::opts_chunk$set(
warning = FALSE,
message = FALSE,
echo = FALSE  # show R code
)

```
## scatter 1

```r, echo=FALSE, eval=TRUE, out., fig.align='center'
library(plotly)
library(htmltools)
mtcars$am[which(mtcars$am == 0)] <- 'Automatic'
mtcars$am[which(mtcars$am == 1)] <- 'Manual'
mtcars$am <- as.factor(mtcars$am)

fig <- plot_ly(
    mtcars,
    x = ~ wt,
    y = ~ hp,
    z = ~ qsec,
    color = ~ am,
    colors = c('#BF382A', '#0C4B8E'),
    width = 1000,
    height = 800
  )
fig <- fig %>% add_markers()
fig <- fig %>% layout(scene = list(xaxis = list(title = 'Weight'),
yaxis = list(title = 'Gross horsepower'),
zaxis = list(title = '1/4 mile time')))


fig %>% layout(
  autosize = F,
  paper_bgcolor = 'rgb(243, 243, 243)',
  margin = list(
    r = 10,
    t = 25,
    b = 40,
    l = 110
  )
) -> p

div(p, align='center')
```

# HEADING

asdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasdasdas asdasdasdasda

【讨论】：

谢谢，同时更改了太多变量！