logo

G

  • 教程
  • API
  • 示例
  • 插件
  • 所有产品antv logo arrow
  • 6.1.26
  • 开始使用
  • 第一节:定义场景
  • 第二节:使用渲染器
  • 第三节:增加交互
  • 进阶内容
    • 场景图
    • 创造一个“太阳系”
    • 使用相机
    • 实现一个简单的动画
    • 使用插件
    • GPGPU 初体验
    • 进入 3D 世界
    • 使用 Box2D 物理引擎
    • 使用 matter.js 物理引擎
    • 使用 Yoga 布局引擎
    • 接管 D3 渲染
    • 接管 Observable Plot 渲染
    • 按需引入渲染器
    • 按需渲染
  • 高级话题
    • 性能优化
    • 自定义图形
    • 理解事件传播路径
    • 使用 React 定义图形
    • 导出画布内容
    • 使用轻量版

接管 Observable Plot 渲染

上一篇
接管 D3 渲染
下一篇
按需引入渲染器

资源

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

在上一节中我们展示了如何接管 D3 的渲染工作,我们可以对其他基于 SVG 实现的图表库进行相同的操作。Observable Plot 就是一个很好的例子。

该图表库同样支持向 plot() 传入 document 对象,我们将 G 的 Document 对象传入:

import * as Plot from '@observablehq/plot';
import { Canvas } from '@antv/g';
import { Renderer } from '@antv/g-canvas';
const canvasRenderer = new Renderer();
const canvas = new Canvas({
container: 'container',
width: 640,
height: 400,
renderer: canvasRenderer,
});
const chart = Plot.dot(data, {
x: 'weight',
y: 'height',
stroke: 'sex',
}).plot({
// 传入 Document 对象代替 `window.document`
document: canvas.document,
});

值得一提的是我们不需要手动调用 canvas.appendChild() 将图表加入画布,Observable Plot 内部完成了这一工作。

DEMO in Codesandbox

下图中上半部分展示了 Observable Plot 原生 SVG 的渲染效果,下半部分展示了使用 g-canvas 绘制的效果:

observablehq plot

同样由于接管了渲染层,我们可以使用例如 g-plugin-rough-canvas-renderer 这样的插件进行手绘风格改造。

DEMO in Codesandbox

sketchy plot