npmpackage.info

@antv/g6-element

♾ A Graph Visualization Framework in JavaScript.

0.8.24

11,172

MIT

TypeScript

10,286,641 5.8

Installations

npm install @antv/g6-element

Pull Requests

Open

2

Total

1,776

Closed

161

Merged

1,613

Issues

Open

119

Total

4,424

Closed

4,305

Releases

121

5.0.33

Published on 28 Nov 2024

5.0.31

Published on 15 Nov 2024

5.0.28

Published on 05 Nov 2024

5.0.27

Published on 29 Oct 2024

5.0.26

Published on 15 Oct 2024

5.0.25

Published on 30 Sept 2024

View all 121 releases

Developer

antvis

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

16.20.2

NPM Version

8.19.4 Statistics

11,172 Stars

5,327 Commits

1,330 Forks

215 Watching

10 Branches

187 Contributors

Updated on 28 Nov 2024

Languages

TypeScript (86.97%)

JavaScript (12.88%)

HTML (0.12%)

Shell (0.02%)

Less (0.01%)

Total Downloads

Cumulative downloads

Total Downloads

10,286,641

Last day

-9.6%

13,862

Compared to previous day

Last week

11.4%

77,291

Compared to previous week

Last month

10.1%

271,156

Compared to previous month

Last year

-3.9%

3,492,180

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@antv/g-base @antv/util tslib @antv/g6-core

Peer Dependencies

@antv/g6

Dev Dependencies

Versions

English | 简体中文

G6: A Graph Visualization Framework in TypeScript

Introduction • Examples • Quick Start • API

G6 is a graph visualization engine. It provides basic capabilities for graph visualization and analysis such as drawing, layout, analysis, interaction, animation, themes, and plugins. With G6, users can quickly build their own graph visualization and analysis applications, making relational data simple, transparent, and meaningful.

✨ Features

G6, as a professional graph visualization engine, boasts the following features:

Rich Elements: It comes with a variety of built-in node, edge, and Combo UI elements with extensive style configurations, supports data callbacks, and has a flexible mechanism for extending custom elements.
Controllable Interactions: It includes more than 10 built-in interaction behaviors and offers a rich array of events, facilitating the expansion of custom interactive behaviors.
High-Performance Layout: The engine features more than 10 common graph layouts, some of which leverage GPU and Rust parallel computing for enhanced performance, and it supports custom layout development.
Convenient Plugins: Optimized built-in plugin functionality and performance, with flexible extensibility, making it easier to implement customized business capabilities.
Multiple Theme and Palettes: Provides two sets of built-in themes, light and dark, that integrate over 20 popular community color palettes based on the AntV new color scheme.
Multi-Environment Rendering: Harnessing the power of G, it supports rendering in Canvas, SVG, and WebGL, as well as server-side rendering with Node.js; it also offers plugin packages that provide powerful 3D rendering and spatial interactions based on WebGL.
React Ecosystem: By utilizing the React front-end ecosystem, it supports React nodes, significantly enriching the presentational styles of G6 nodes.

🔨 Getting Started

G6 is usually installed via a package manager such as npm or Yarn.

1$ npm install @antv/g6

The Graph object then can be imported from G6.

1<div id="container"></div>

1import { Graph } from '@antv/g6';
2
3// Get the Data.
4const data = {
5  nodes: [
6    /* your nodes data */
7  ],
8  edges: [
9    /* your edges data */
10  ],
11};
12
13// Create the Graph instance.
14const graph = new Graph({
15  container: 'container',
16  data,
17  node: {
18    palette: {
19      type: 'group',
20      field: 'cluster',
21    },
22  },
23  layout: {
24    type: 'force',
25  },
26  behaviors: ['drag-canvas', 'drag-node'],
27});
28
29// Render the Graph.
30graph.render();

All goes well, you can get the following lovely graph!

🌍 Ecosystem

Ant Design Charts: A React chart library based on G2, G6, X6, L7.
Graphin: A simple React wrapper based on G6, as well as an SDK for developing graph visualization applications.

For more ecosystem open-source projects, contributions are welcome. Please feel free to submit a PR for inclusion.

📮 Contributing

Issue Reporting: If you encounter any issues with G6 during use, please feel free to submit an issue, along with the minimal sample code that can reproduce the problem.
Contribution Guide: Information on how to get involved in the development and contribution to G6.
Ideas Discussion: Discuss your ideas on GitHub Discussions or in the DingTalk group.

📄 License

MIT.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

7

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

4

Security-Policy

Determines if the project has published a security policy.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: third-party GitHubAction not pinned by hash: .github/workflows/auto_close_issue.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/antvis/G6/auto_close_issue.yml/v5?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/auto_close_issue.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/antvis/G6/auto_close_issue.yml/v5?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/auto_close_issue.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/antvis/G6/auto_close_issue.yml/v5?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/antvis/G6/ci.yml/v5?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/antvis/G6/ci.yml/v5?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/antvis/G6/ci.yml/v5?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/antvis/G6/ci.yml/v5?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/antvis/G6/ci.yml/v5?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/antvis/G6/deploy.yml/v5?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/antvis/G6/deploy.yml/v5?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/antvis/G6/deploy.yml/v5?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/antvis/G6/deploy.yml/v5?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/issue_translate.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/antvis/G6/issue_translate.yml/v5?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/issue_translate.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/antvis/G6/issue_translate.yml/v5?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/issue_translate.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/antvis/G6/issue_translate.yml/v5?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/antvis/G6/publish.yml/v5?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/antvis/G6/publish.yml/v5?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/antvis/G6/publish.yml/v5?enable=pin
Warn: pipCommand not pinned by hash: .github/workflows/ci.yml:26
Info: 0 out of 9 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 9 third-party GitHubAction dependencies pinned
Info: 0 out of 1 pipCommand dependencies pinned
Info: 1 out of 1 npmCommand dependencies pinned

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

5.8

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More