初见 g6 图表库
hello world// 1. 准备好数据// node(节点)let nodes = [ { id: 1, // 节点 id x: 0, // 节点 x 坐标 y: 0 // 节点 y 坐标 }, { id: 2, x: 100, y: 0 }]// edge(边)let edges = [ { source: ‘2’, // 节点 id，从哪里出发 target: ‘1’ // 节点 id，到哪里结束 }]// 2. 初始化对象let g6 = new G6.Graph({ container: ‘container’, // 容器 id fitView: ‘cc’, // 渲染位置，cc 表示渲染到图表的中间位置(center center) height: window.innerHeight // 画布高})// 3. 渲染数据g6.read({ edges, nodes })这是渲染出来的效果。Demo源码， 官方文档。自定义节点可以看到默认的节点是一个蓝色的圈，如果要想改变节点的样子，就需要用到自定义节点。// 1. 准备好数据// node(节点)let nodes = [ { id: 1, // 节点 id x: 0, // 节点 x 坐标 y: 0, // 节点 y 坐标 name: ‘张三’ // 自定义数据 }, { id: 2, x: 100, y: 0, name: ‘李四’ // 自定义数据 }]// edge(边)let edges = [ { source: ‘2’, // 节点 id，从哪里出发 target: ‘1’ // 节点 id，到哪里结束 }]// 2. 初始化对象let g6 = new G6.Graph({ container: ‘container’, // 容器 id renderer: ‘svg’, fitView: ‘cc’, // 渲染位置，cc 表示渲染到图表的中间位置(center center) height: window.innerHeight // 画布高})// 3. 注册节点G6.registerNode(‘rect’, { draw (item) { const group = item.getGraphicGroup() const model = item.getModel() let size = 50 let center = size / 2 // 绘制文本节点 let rect = group.addShape(‘rect’, { attrs: { x: 0, y: 0, width: size, height: size, fill: ‘#6cf’ } }) // 绘制圆形 let circle = group.addShape(‘circle’, { attrs: { x: center, y: center, r: center, fill: ‘#ddd’, stroke: ‘#f06’ } }) // 绘制文本节点 let text = group.addShape(’text’, { attrs: { x: 0, y: 0, fontSize: 20, fill: ‘#000’, stroke: ‘orange’, text: id：${model.id} } }) // 绘制 dom 元素 let dom = group.addShape(‘dom’, { attrs: { x: 0, y: 0, width: size, height: size, html: <div>你好呀${model.name}，你好呀${model.name}</div> } }) return group }})// 4. 使用节点g6.node({ shape: ‘rect’})// 5. 渲染数据g6.read({ edges, nodes })下图是渲染出来的效果。Demo源码，官方文档。自定义节点的时候有以下现象：添加 shape 有先后顺序，后面会覆盖前面的。像是 dom 的 z-index添加 text 节点的时候，其它 shape 会避让。同样坐标设置的都是 [0, 0]，文字会渲染在顶部。链接线会以 return 元素为基准。如果 return text，线会连在 text 节点那里；如果 return group，就是整体的中间。model 里可以取出定义 node 的时候的其它数据，比如例子里的 name。绘制的元素大小指定后，超出的部分会被裁切，比如例子里的 dom。绘制 dom 元素时，需要在初始化对象的时候，指定 new G6.Graph({ renderer: ‘svg’ }) 。自定义边自定义边的使用方法跟自定义节点的使用方式类似。// 1. 准备好数据// node(节点)let nodes = [ { id: 1, x: 0, y: 0 }, { id: 2, x: 100, y: 0 }, { id: 3, x: 100, y: 50 }]// edge(边)let edges = [ { source: 1, // 节点 id，从哪里出发 target: 2 // 节点 id，到哪里结束 }, { source: 1, // 节点 id，从哪里出发 target: 3 // 节点 id，到哪里结束 }]// 2. 初始化对象let g6 = new G6.Graph({ container: ‘container’, // 容器 id fitView: ‘cc’, // 渲染位置，cc 表示渲染到图表的中间位置(center center) height: window.innerHeight // 画布高})// 3. 自定义边G6.registerEdge(’line’, { // 路径 getPath (item) { const points = item.getPoints() const start = points[0] const end = points[points.length - 1] return [ [ ‘M’, start.x, start.y ], [ ‘L’, end.x, end.y ] ] }, // 起始（圆形）箭头 startArrow: { path () { const r = 5 const x = -5 const y = 0 return [ [ ‘M’, x, y - r ], [ ‘a’, r, r, 0, 1, 1, 0, 2 * r ], [ ‘a’, r, r, 0, 1, 1, 0, -2 * r ], [ ‘z’ ] ] }, shorten () { return 10 }, style (item) { const keyShape = item.getKeyShape() const { strokeOpacity, stroke } = keyShape.attr() return { fillOpacity: strokeOpacity, fill: ‘#fff’, stroke } } }})// 4. 使用边g6.edge({ shape: ’line’, startArrow: true, // 添加头部箭头 color: ‘red’, endArrow: true // 添加尾部箭头})// 5. 渲染数据g6.read({ edges, nodes })这是渲染出来的效果。Demo源码，官方文档。自定义节边的时候有以下现象：自带的边是有透明度灰色的线。设置 { endArrow: true } 之后就会在结束点加上箭头。颜色可以直接设置 color，也可以是同 style 绘制。添加事件// 1. 准备好数据// node(节点)let nodes = [ { id: 1, x: 0, y: 0 }, { id: 2, x: 100, y: 0 }, { id: 3, x: 100, y: 50 }]// edge(边)let edges = [ { source: 1, // 节点 id，从哪里出发 target: 2 // 节点 id，到哪里结束 }, { source: 1, // 节点 id，从哪里出发 target: 3 // 节点 id，到哪里结束 }]// 2. 初始化对象let g6 = new G6.Graph({ container: ‘container’, // 容器 id fitView: ‘cc’, // 渲染位置，cc 表示渲染到图表的中间位置(center center) height: window.innerHeight // 画布高})// 3. 添加事件监听g6.on(’node:click’, (e) => { const { item } = e const { id, x, y } = item.getModel() alert(id:${id}, x:${x}, y:${y})})// 4. 渲染数据g6.read({ edges, nodes })事件的监听是组合的，组合方式就是 [对象]:[事件]，’node’，’edge’，‘group’, ‘guide’，都可以自由组合使用，如 node:click, edge:dbclick。Demo源码，官方文档。 ...