D3 渲染器

D3 渲染器使用 D3 以 SVG 形式绘制图表。

快速入门

npm install d3

import { d3Renderer } from '@tiptap-pro/extension-diagrams/d3'

Diagrams.configure({ renderers: [d3Renderer()] })

图表类型

D3 渲染器通过 d3-sankey 绘制桑基图。

网络通过力模拟进行布局。它从固定的起点运行固定数量的步骤，因此每次都以相同的方式绘制相同的数据。
orientation: 'horizontal' 会将条形图改为横向布局；组合图中的柱形仍保持纵向。
样式支持。 支持系列线条样式、坐标轴和参考线中的所有字段。
双击文本将其重命名，请参阅图表中的编辑。

选项

选项	类型	说明
`id`	`string`	id 图表存储。默认 `'d3'`
`label`	`string`	菜单的名称。默认 `'d3'`
`customizers`	`Record<string, D3Customizer>`	按名称更改绘制图表的函数。默认`{}`。请参阅定制程序
`measureText`	`(text, fontSize) => number`	返回标签的宽度，了解确切的标签宽度。如果没有它，则估计宽度
`createDocument`	`() => Document`	对于没有 `document` 的 `toSVG`，例如在服务器上
`sankey`	`d3-sankey` 模块	对于 sankey 图表

Sankey 图表

npm install d3-sankey

import * as sankey from 'd3-sankey'

d3Renderer({ sankey })

如果没有 sankey，D3 渲染器不会列出 sankey 类型，另一个渲染器会绘制 sankey图表。

定制器

定制器是您以名称注册的功能。图表通过该名称引用它：

d3Renderer({
  customizers: {
    highlightMax(svg, { data }) {
      // change the drawn SVG element: add marks, reorder, restyle
    },
  },
})

editor.commands.updateChartSpec({ spec: { renderer: { d3: { customizer: 'highlightMax' } } } })

定制程序接收绘制的 SVGSVGElement 和 { data, spec, theme, size }。它在每次绘制后在编辑器和导出中运行。

该文档仅存储定制者的名称，而不存储其代码。绘制一个命名此编辑器没有的定制器的图表时，没有定制器。

导出和服务器

在浏览器中，toSVG 不需要其他任何东西。在服务器上，传递 DOM 实现：

import { parseHTML } from 'linkedom'

d3Renderer({
  createDocument: () => parseHTML('<!doctype html><html><body></body></html>').document,
})

PreviouslyECharts

Next upMermaid