Rmarkdown xaringan演示文稿中的美人鱼图无法正确呈现

时间:2019-11-04 07:45:36

标签: r r-markdown diagrammer xaringan mermaid

我正在尝试使用xaringan渲染的Rmarkdown html演示文稿中制作一些简单的流程图。我正在使用DiagrammeR包绘制美人鱼图。但是,尽管图表在Rstudio查看器中正确显示,但样式不会出现在演示输出中。

例如

DiagrammeR::mermaid("
graph LR;
A((Orange)) --> B((Grey));

classDef orange fill:#f96;
classDef grey fill:#d3d3d3;
class A orange;
class B grey;
")

在控制台上运行时,将按预期生成一个橙色节点和一个灰色节点。但是,

---
title: "Simple Example" 
output: 
  xaringan::moon_reader
---


```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE, message = FALSE, warning = FALSE)
```

## Flow chart

```{r example, fig.align='center', fig.retina=3}
DiagrammeR::mermaid("
graph LR;
A((Orange)) --> B((Grey));

classDef orange fill:#f96;
classDef grey fill:#d3d3d3;
class A orange;
class B grey;
")
```

以默认的美人鱼颜色生成流程图,而忽略样式。

有人知道解决方法吗?我也乐于接受其他软件包的建议,以绘制简单的树形图。

1 个答案:

答案 0 :(得分:1)

美人鱼创建一个htmlwidget作为输出。您应该将其包装到import React, { Component } from "react"; import { Navbar, Nav, Form, FormControl, Button } from "react-bootstrap"; import "./stylesheets/NavBar.css"; class NavBar extends Component { state = {}; render() { return ( <div id="bar"> <Navbar bg="light" variant="light"> <Navbar.Brand href="#home">CALC-U</Navbar.Brand> <Nav className="ml-auto"> <Nav.Link href="#home">Home</Nav.Link> <Nav.Link href="#about">About</Nav.Link> <Nav.Link href="#updates">Updates</Nav.Link> <Nav.Link href="#profile">Profile</Nav.Link> </Nav> </Navbar> </div> ); } } export default NavBar; 节中。 widgetframe软件包可以为您做到这一点,其他基于htmlwidget的应用程序(如DT,传单,Dygraph)也可以使用此方法嵌入xaringan中。

<iframe>