MBA!

基于 D3.js 构建的现代数据可视化库,采用原生 SVG 渲染,并通过 Rough.js 提供独特的手绘风格。

$npm install mba

为什么选择 MBA?

原生 SVG

纯 SVG 渲染,无需 Canvas 依赖。清晰、可缩放、可打印。

手绘风格

内置 Rough.js 集成,提供独特的手绘美学。

D3 驱动

利用 D3.js 进行精确计算和流畅动画。

TypeScript 支持

完整的 TypeScript 支持,提供全面的类型定义。

轻量级

最小化包体积,支持 Tree-shaking。

框架无关

支持 React、Vue、Svelte 或原生 JavaScript。

简洁的 API

几行代码即可开始使用

import { bindGraph } from 'mba/bindGraph'
import { bindBar } from 'mba/bindBar'

// bindings
bindGraph()
bindBar()

// Initialize a bar chart
const chart = bindBar('#container', {
    data: [
        { name: 'Apple', value: 120 },
        { name: 'Orange', value: 200 },
        { name: 'Banana', value: 150 },
    ],
    fillStyle: 'hachure',
    duration: 800,
})

准备好了吗?

立即使用 MBA 构建精美的图表。