npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@antv/g6

v5.0.39

Published

A Graph Visualization Framework in JavaScript

Downloads

407,997

Readme

English | 简体中文

npm Version Build Status Coverage Status npm Download typescript npm License

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画、主题、插件等图可视化和分析的基础能力。基于 G6,用户可以快速搭建自己的图可视化分析应用,让关系数据变得简单,透明,有意义。

✨ 特性

G6 作为一款专业的图可视化引擎,具有以下特性:

  • 丰富的元素:内置丰富的节点、边、Combo UI 元素,样式配置丰富,支持数据回调,且具备有灵活扩展自定义元素的机制。
  • 可控的交互:内置 10+ 交互行为,且提供丰富的各类事件,便于扩展自定义的交互行为。
  • 高性能布局:内置 10+ 常用的图布局,部分基于 GPU、Rust 并行计算提升性能,支持自定义布局。
  • 便捷的组件:优化内置组件功能及性能,且有灵活的扩展性,便于业务实现定制能力。
  • 多主题色板:提供了亮色、暗色两套内置主题,在 AntV 新色板前提下,融入 20+ 常用社区色板。
  • 多环境渲染:发挥 G 能力, 支持 Canvas、SVG 以及 WebGL,和 Node.js 服务端渲染;基于 WebGL 提供强大 3D 渲染和空间交互的插件包。
  • React 体系:利用 React 前端生态,支持 React 节点,大大丰富 G6 的节点呈现样式。

🔨 开始使用

可以通过 NPM 或 Yarn 等包管理器来安装。

$ npm install @antv/g6

成功安装之后,可以通过 import 导入 Graph 对象。

<div id="container"></div>
import { Graph } from '@antv/g6';

// 准备数据
const data = {
  nodes: [
    /* your nodes data */
  ],
  edges: [
    /* your edges data */
  ],
};

// 初始化图表实例
const graph = new Graph({
  container: 'container',
  data,
  node: {
    palette: {
      type: 'group',
      field: 'cluster',
    },
  },
  layout: {
    type: 'force',
  },
  behaviors: ['drag-canvas', 'drag-node'],
});

// 渲染图
graph.render();

一切顺利,你可以得到下面的力导图!

🌍 生态

  • Ant Design Charts: React 图表库,基于 G2、G6、X6、L7。
  • Graphin:基于 G6 的 React 简单封装,以及图可视化应用研发的 SDK。

更多生态开源项目,欢迎 PR 收录进来。

📮 贡献

  • 问题反馈:使用过程遇到的 G6 的问题,欢迎提交 Issue,并附上可以复现问题的最小案例代码。
  • 贡献指南:如何参与到 G6 的开发和贡献
  • 想法讨论:在 GitHub Discussion 上或者钉钉群里面讨论。

📄 License

MIT.