#扩展与注册

MBA 的“扩展点”主要集中在 CSR/DOM：你可以注册新的绘制器（drawer），或新增 FillStyle 纹理。

#DOM 图表实例 API（CSR ref / DOM new）

CSR 图表组件的 ref 指向底层 DOM 图表实例；DOM 入口是直接 new。

实例实现了 IGraph，常用方法：

方法	说明
`data(nextData)`	设置/更新数据
`options(partial)`	更新配置（不改 data）
`resize()`	触发一次重新计算尺寸（容器尺寸变动时使用）
`toSVG()`	导出 SVG 字符串
`destroy()`	销毁、解绑事件

#注册图形形状（drawer）

mba/dom/register 暴露了一组注册函数（用于 DOM/CSR）：

TypeScript

import {
  registerBar,
  registerPie,
  registerMultiBar,
  registerHMultiBar,
  registerHBar,
  registerLine,
} from 'mba/dom/register'

#示例：注册一个 Bar 的自定义 type

TypeScript

import { registerBar } from 'mba/dom/register'

registerBar('my-bar', (graph, props, layout, items, enter) => {
  // 这里是 D3 selection 的 enter/update 绘制流程
  // 建议从 mba 源码的 BarDrawer.ts 复制一个现有实现进行改造
})

然后在组件里使用：

TSX

'use client'
import { Bar } from 'mba/csr'

export default () => {
  return <Bar
    type="my-bar"
    labelField="name"
    valueField="value"
    valueLabel="Value"
    data={[{ name: 'A', value: 1 }]}
  />
}

#扩展 FillStyle（高级）

MBA 的 FillStyle 在 DOM/SSR 都是“注册表”机制。仓库内已内置 linear/hlinear/slash/grid/grain。

如果你要新增一个 FillStyle，需要深层导入注册函数（属于高级用法）：

TypeScript

import { registerFillStyle } from 'mba/components/FillStyle/dom/registerFillStyle'

registerFillStyle('my-style', (defs, options) => {
  // defs: d3 Selection<SVGDefsElement>
  // options: { fillStyle, id, palette, size? }
})

该 API 属于内部实现细节，未来可能调整；更推荐优先使用内置 FillStyle 与 setStyle 做样式覆盖。