目前支持开发者搭建属于自己的图，图分析、图应用、图编辑器 图编辑器可以支持多种图例的创建
G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图 图分析 应用或是 图编辑器 应用
最近一直在被G6可视化工具困扰，在逐渐摸索过程中，慢慢可以进行简单图例的搭建 以下，根据react中如何使用G6来写这篇文章
----Go
整体项目使用es6模块化开发
首先下载G6 npm install @antv/g6 --save
import React from 'react'; import G6 from '@antv/g6'; class G6 extends React.Component { constructor(props) { super(props); this.state={ }; } componentDidMount() { // dom 已经渲染完成时加载图片, G6渲染依赖根节点 this.renderG6(); } renderG6 = () => { // 渲染图所需数据 const data = { nodes: [{ id: 'node1', shape: 'customNode', x: 100, y: 200 },{ id: 'node2', x: 300, y: 200 }], edges: [{ id: 'edge1', target: 'node2', source: 'node1' }] }; // 初始化G6图 const graph = new G6.Graph({ container: 'mountNode', width: 600, height: 300 }); // Graph 是最基础的图类, G6 技术栈中所有关系图都是由该类负责绘制 // 读数据 graph.read(data); } render() { return ( <div id="mountNode"></div> ) } }自定义节点
G6.registerNode('customNode', { draw(item){ // draw 是图项最终绘制的接口， 可以拿到shape为customNode的所有数据 const group = item.getGraphicGroup(); // 获取 G (图形库) 的图形图组 const model = item.getModel(); // 图形数据 return group.addShape('rect', { attrs: { x: 0, y: 0, width: 100, height: 100, stroke: 'red' } anchor: array || object || callback <!-- anchor: [ [0.5, 1], // 底边中点 [0.5, 0], // 上边中点 [1, 0], // 左边中点 [1, 0.5], // 右边中点 ], --> }); } }, '基于某种图形进行绘制的类型');先下班。。。。。。
转载于:https://www.cnblogs.com/mxs-blog/p/9886192.html
相关资源：数据结构—成绩单生成器