G6

英语| 简体中文

G6：打字稿中的图形可视化框架

简介•示例•快速启动•API

G6是图形可视化引擎。它为图形可视化和分析提供了基本功能，例如绘图，布局，分析，交互，动画，主题和插件。使用G6，用户可以快速构建自己的图形可视化和分析应用程序，从而使关系数据简单，透明且有意义。

特征

G6作为专业图形可视化引擎，拥有以下功能：

• 丰富的元素：它具有各种具有广泛样式配置的内置节点，边缘和组合UI元素，支持数据回调，并具有一种灵活的机制来扩展自定义元素。
• 可控的互动：它包括10多种内置交互行为，并提供了丰富的事件，从而促进了自定义交互行为的扩展。
• 高性能布局：发动机具有10多个常见的图形布局，其中一些利用GPU和Rust Parallel Computing来提高性能，并且支持自定义布局开发。
• 方便的插件：具有灵活的可扩展性，优化的内置插件功能和性能，使实现自定义业务功能变得更加容易。
• 多重主题和调色板：提供两套内置主题，即浅色和深色，这些主题基于ANTV新配色方案整合了20多个流行的社区调色板。
• 多环境渲染：利用G的功率，它支持在画布，SVG和WebGL中渲染，以及使用node.js的服务器端渲染；它还提供了基于WebGL的功能强大的3D渲染和空间交互的插件软件包。
• React生态系统：通过利用React前端生态系统，它支持反应节点，并显着丰富G6节点的表现样式。

？入门

G6通常通过软件包管理器（例如NPM或纱线）安装。

$ npm install @antv/g6

然后可以从G6导入Graph对象。

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

 import { Graph } from '@antv/g6' ;

// Get the Data.
const data = {
  nodes : [
    /* your nodes data */
  ] ,
  edges : [
    /* your edges data */
  ] ,
} ;

// Create the Graph instance.
const graph = new Graph ( {
  container : 'container' ,
  data ,
  node : {
    palette : {
      type : 'group' ,
      field : 'cluster' ,
    } ,
  } ,
  layout : {
    type : 'force' ,
  } ,
  behaviors : [ 'drag-canvas' , 'drag-node' ] ,
} ) ;

// Render the Graph.
graph . render ( ) ;

一切顺利，您可以获得以下可爱的图！

？生态系统

• 蚂蚁设计图表：基于G2，G6，X6，L7的React图表库。
• Graphin ：基于G6的简单反应包装器，以及用于开发图形可视化应用程序的SDK。

对于更多的生态系统开源项目，欢迎捐款。请随时提交公关以纳入。

？贡献

• 问题报告：如果您在使用过程中遇到G6的任何问题，请随时提交问题，以及可以重现问题的最小示例代码。
• 贡献指南：有关如何参与G6的开发和贡献的信息。
• 想法讨论：讨论您在GitHub讨论或DingTalk组中的想法。

？执照

麻省理工学院。