markmap-view
Renderize um markmap a partir de dados transformados.
Instalação
$ npm install markmap-view
Ou carregue a partir do CDN:
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-view"></script>
Uso
Crie um elemento SVG com largura e altura explícitas:
<svg id="markmap" style="width: 800px; height: 800px"></svg>
Supondo que já temos o nó { root }
e os ativos { styles, scripts }
de markmap-lib.
Há duas maneiras de importar markmap-view
:
// carregar com <script>
const { markmap } = window;
const { Markmap, loadCSS, loadJS } = markmap;
// ou como ESM
import * as markmap from 'markmap-view';
import { Markmap, loadCSS, loadJS } from 'markmap-view';
Agora podemos renderizar um markmap no elemento SVG:
// 1. carregar ativos
if (styles) loadCSS(styles);
if (scripts) {
loadJS(scripts, {
// Para plugins acessarem o módulo `markmap`
getMarkmap: () => markmap,
});
}
// 2. criar markmap
// `options` é opcional, ou seja, `undefined` pode ser passado aqui
Markmap.create('#markmap', options, root); // -> retorna uma instância do Markmap
O primeiro argumento de Markmap.create
também pode ser um elemento SVG real, por exemplo:
const svgEl = document.querySelector('#markmap');
Markmap.create(svgEl, options, data); // -> retorna uma instância do Markmap