markmap-view

NPM

从转换的数据渲染一个 markmap。

安装

$ npm install markmap-view

或者从 CDN 加载：

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-view"></script>

用法

创建一个具有明确宽度和高度的 SVG 元素：

<svg id="markmap" style="width: 800px; height: 800px"></svg>

假设我们已经从 markmap-lib 获取了 { root } 节点和资源 { styles, scripts }。

有两种方式可以导入 markmap-view：

// 使用 <script> 加载
const { markmap } = window;
const { Markmap, loadCSS, loadJS } = markmap;

// 或者作为 ESM
import * as markmap from 'markmap-view';
import { Markmap, loadCSS, loadJS } from 'markmap-view';

现在我们可以将 markmap 渲染到 SVG 元素中：

// 1. 加载资源
if (styles) loadCSS(styles);
if (scripts) {
    loadJS(scripts, {
        // 供插件访问 `markmap` 模块
        getMarkmap: () => markmap,
    });
}

// 2. 创建 markmap
// `options` 是可选的，即可以传入 `undefined`
Markmap.create('#markmap', options, root); // -> 返回一个 Markmap 实例

Markmap.create 的第一个参数也可以是一个实际的 SVG 元素，例如：

const svgEl = document.querySelector('#markmap');
Markmap.create(svgEl, options, data); // -> 返回一个 Markmap 实例