/G

💥 A flexible rendering engine for visualization.

Primary LanguageTypeScript

English | 简体中文

G

CI Coverage Status semantic-release: angular

TypeScript License

npm package npm downloads Percentage of issues still open PRs Welcome

As the underlying rendering engine of AntV, G is dedicated to provide consistent and high performance 2D / 3D graphics rendering capabilities for upper layer products, adapting all underlying rendering APIs (Canvas2D / SVG / WebGL / WebGPU / CanvasKit / Node.js) on the web side. In particular, it provides GPGPU support for algorithms suitable for parallel computing in graph scenarios.

D3 force directed graph D3 barchart D3 sketchy barchart Yoga plugin Box2D physics engine plugin Rough.js plugin Canvaskit plugin Yoga plugin Canvaskit plugin 3D force directed graph

✨ Features

Easy-to-use API。The graphics and event system is compatible with DOM Element & Event API, and the animation system is compatible with Web Animations API, which can be adapted to the existing ecosystem of Web side such as D3, Hammer.js gesture library, etc. at a very low cost.

Support multiple rendering environments。Support Canvas2D / SVG / WebGL / WebGPU / CanvasKit and runtime switching, and also server-side rendering.

High performance rendering and computing。WebGPU-based GPGPU support for parallelizable algorithms. webgpu-graph is a library of graph analysis algorithms using GPU acceleration.

Extensible plug-in mechanism and rich set of plug-ins:

📦 Install

# Install Core
$ npm install @antv/g --save
# Canvas Renderer
$ npm install @antv/g-canvas --save
# SVG Renderer
$ npm install @antv/g-svg --save
# WebGL Renderer
$ npm install @antv/g-webgl --save

🔨 Usage

<div id="container"></div>
import { Circle, Canvas, CanvasEvent } from '@antv/g';
import { Renderer as CanvasRenderer } from '@antv/g-canvas';
// or
// import { Renderer as WebGLRenderer } from '@antv/g-webgl';
// import { Renderer as SVGRenderer } from '@antv/g-svg';

// create a canvas
const canvas = new Canvas({
    container: 'container',
    width: 500,
    height: 500,
    renderer: new CanvasRenderer(), // select a renderer
});

// create a circle
const circle = new Circle({
    style: {
        cx: 100,
        cy: 100,
        r: 50,
        fill: 'red',
        stroke: 'blue',
        lineWidth: 5,
    },
});

canvas.addEventListener(CanvasEvent.READY, function () {
    // append to canvas
    canvas.appendChild(circle);

    // add listener for `click` event
    circle.addEventListener('click', function () {
        this.style.fill = 'green';
    });
});

⌨️ Development

Start previewing demos:

git clone git@github.com:antvis/g.git
cd g
pnpm install
pnpm build
pnpm dev

API Spec

Start a dev-server on root dir, eg. http-server:

http-server -p 9090

Open api.html on localhost:9090/spec/api.html.

Run test cases

Build and run test cases:

pnpm build
pnpm test

Start site

Preview our site:

pnpm build
pnpm link-site
pnpm start

Inspired by

Contributors


dengfuping


xiaoiver


dxq613


dependabot-preview[bot]


zhanba


afc163


limichange


entronad


hustcc


tangying1027


zengyue


simaQ


lessmost


visiky


lxfu1


ICMI


Deturium


Yanyan-Wang


yiiiiiiqianyao


moayuisuda


elaine1234


mxz96102


DrugsZ


baizn


terence55


tyr1dev


budlion


luoxupan


ikxin


Leannechn


dev-itsheng

This project follows the git-contributor spec, auto updated at Wed Jun 21 2023 13:21:24 GMT+0800.