Quarto列布局下DAG图表被截断且无法自适应的问题求助

问题描述 #

我正在制作演示幻灯片，需要展示4×4布局的四个不同有向无环图（DAG）。使用Quarto的revealjs格式时，发现图表无法自适应列宽，列宽过窄时会被截断。当前环境为Quarto 1.4.549、R 4.3.2，以下是可复现的示例代码：

正常显示的单图代码 #

---
title: "test"
format: revealjs
---

# DAG Before You Model

```{dot}
digraph {
layout = neato

m [
    shape = none
    pos = "-1,1!"
]

d [
    shape = none
    pos = "0,0!"
]

a [
    shape = none
    pos = "1,1!"
]

m -> d
a -> d
}

### 添加列布局后图表被截断的代码
```yaml
---
title: "test"
format: revealjs
---

# DAG Before You Model

::: {.columns}

::: {.column width="50%"}

```{dot}
digraph {
layout = neato

m [
    shape = none
    pos = "-1,1!"
]

d [
    shape = none
    pos = "0,0!"
]

a [
    shape = none
    pos = "1,1!"
]

m -> d
a -> d
}

:::

::: {.column width="50%"}
:::

:::

调整列宽仅能部分恢复截断内容，但图表始终无法缩放。

---

## 解决方案

### 方法1：通过代码块参数控制图表输出尺寸
在`dot`代码块中添加`out.width="100%"`参数，让图表自动占满所在列的宽度；同时配合`fig.width`和`fig.height`调整图表基础尺寸，保证缩放后清晰度足够。

修改后的列布局代码示例：
```yaml
---
title: "test"
format: revealjs
---

# DAG Before You Model

::: {.columns}

::: {.column width="50%"}

```{dot}
#| out.width: "100%"
#| fig.width: 4
#| fig.height: 3
digraph {
layout = neato

m [
    shape = none
    pos = "-1,1!"
]

d [
    shape = none
    pos = "0,0!"
]

a [
    shape = none
    pos = "1,1!"
]

m -> d
a -> d
}

:::

::: {.column width="50%"}

:::

:::

### 方法2：调整Dot图的布局参数
当前使用`neato`布局并固定了节点`pos`坐标，这会限制图表自适应能力。可尝试两种调整：
- 移除固定的`pos`属性，让`neato`自动根据容器尺寸调整节点位置；
- 添加`ratio="compress"`属性，让Dot自动压缩图表以适配可用空间。

示例代码：
```dot
digraph {
layout = neato
ratio = "compress" # 新增压缩适配参数

m [shape = none]
d [shape = none]
a [shape = none]

m -> d
a -> d
}

方法3：添加自定义CSS确保图表容器支持缩放 #

在Quarto文档的YAML头部引入自定义CSS，强制图表容器和图片元素自适应列宽：

---
title: "test"
format: 
  revealjs:
    css: styles.css
---

创建styles.css文件，添加以下内容：

.columns .column img {
    max-width: 100% !important;
    height: auto !important;
}
.columns .column {
    overflow: visible;
}

内容的提问来源于stack exchange，提问作者jebyrnes