g6/README-zh_CN.md
2020-02-14 11:30:12 +08:00

3.0 KiB

G6: TypeScript 图可视化框架

Coverage Status npm package NPM downloads Percentage of issues still open

English README

G6 是一个图可视化框架。它提供了一套图可视化的基础设置,包括渲染、布局、交互、动画、分析、辅助工具等。帮助开发者搭建属于自己的图 图分析 应用或是 图编辑器 应用。 详情请见开发文档

安装

$ npm install @antv/g6

使用

import G6 from '@antv/g6';

const data = {
  nodes: [
    {
      id: 'node1',
      x: 100,
      y: 200,
    },
    {
      id: 'node2',
      x: 300,
      y: 200,
    },
  ],
  edges: [
    {
      target: 'node2',
      source: 'node1',
    },
  ],
};
const graph = new G6.Graph({
  container: 'mountNode',
  width: 500,
  height: 500,
  defaultNode: {
    type: 'circle',
    style: {
      fill: '#40a9ff',
      stroke: '#096dd9',
    },
  },
  nodeStateStyles: {
    hover: {
      lineWidth: 3,
    },
    select: {
      lineWidth: 5,
    },
  },
});
graph.data(data);
graph.render();

开发

$ npm install

# run test case
$ npm run test-live

# build watching file changes and run demos
$ npm run dev

如何贡献

请让我们知道您要解决或贡献什么,所以在贡献之前请先提交 issues 描述 bug 或建议。

成为一个贡献者前请阅读 代码贡献规范.

License

MIT license.