G6-graphQuickStart

第二步：数据准备导入G6的数据源是一个JSON格式的对象。对象需要有节点（nodes）和边（edges）字段，用数组表示：constdata={//点集nodes:[{id:'node1',//String，如果存在则节点必须存在exists,nodex的唯一标识:100,//Number,可选,节点位置的x值y:200,//Number,可选,节点位置的y值},{id:'node2',//String,节点如果存在,必填,节点的唯一标识x:300,//Number,可选,节点位置的x值y:200,//Number,可选,y值节点位置},],//边集edges:[{source:'node1',//String,required,起始点idtarget:'node2',//String,required,目标点id},],};注意nodes数组包含节点对象，唯一的id是每个节点对象中的必要属性，x和y用于定位；edges数组包含边对象，source和target是每条边的必要属性，分别代表边的起点id和目标点id。顶点和边的其他属性见链接：图元配置文档。第三步：创建关系图在创建关系图（实例化）时，至少需要为关系图设置容器、宽度和高度。constgraph=newG6.Graph({container:'mountNode',//String|HTMLElement,必填,第一步创建的容器id或容器本身width:800,//Number,必填,graphheight的宽度:500,//Number,required,图表的高度});第四步：配置数据源，渲染并创建关系图（实例化），至少要设置图的容器、宽高。图.数据（数据）；//将第2步中的数据源读取到graph中graph.render();//渲染图的最终结果3Configuration3.1配置图的元素和元素具体指的是图Edge上的节点Node，不管是节点还是边，它们的属性分为两种：style属性style：对应Canvas中的各种样式，可以随着元素状态State的变化而改变；其他属性：比如图形（shape），id（id）是元素状态State改变时不能改变的属性。例如G6设置悬停或点击节点改变节点状态，只能自动改变节点的样式属性（如填充、描边等），其他属性（如形状等）不能被改变。如果需要更改其他属性，需要通过graph.updateItem手动配置。style属性是一个名为style的对象，style字段与其他属性并列。以节点元素为例，其属性的数据结构如下：{id:'node0',//元素的idshape:'circle',//元素的图形大小:40,//size元素label:'node0'//标签文本labelCfg:{//标签配置属性positions:'center',//标签的属性，标签在元素中的位置style:{//包装字段样式数据结构中标签的样式属性和标签的其他属性parallelfontSize:12//标签的样式属性，文本字体大小}}//...,//其他属性style:{//字段样式换行style属性和数据结构上并列的其他属性fill:'#000',//style属性，元素的填充颜色stroke:'#888',//style属性，元素的笔触颜色//...//其他样式属性}}边缘元素的属性数据结构与节点元素类似，但多了源和目标字段其他属性，表示起始节点和结束节点的id全局配置。适用场景：所有节点统一属性配置，所有边统一属性配置。使用方法：使用图的两个配置项：defaultNode：默认状态下节点的样式属性（style）等属性；defaultEdge：默认状态下边的样式属性（style）等属性。defaultNode:{size:30,//节点大小//...//其他节点配置//节点样式配置style:{fill:'steelblue',//节点填充颜色stroke:'#666',//节点strokecolorlineWidth:1,//节点描边粗细},//节点标签文字配置labelCfg:{//节点标签文字样式配置style:{fill:'#fff',//节点标签文字颜色},},},//边的默认样式配置（style）和其他配置defaultEdge:{//...//其他边配置//边样式配置style:{opacity:0.6,//边透明度stroke:'grey',//边描边颜色},//边上的标签文字配置labelCfg:{autoRotate:true,//边上的标签文字根据边的方向旋转},},3.2使用图布局Layout时有就是数据中没有节点位置信息，或者数据中的位置信息不符合要求，就需要使用一些布局算法对图进行布局。G6提供了7种通用图布局和4种树图布局：Generalgraph：RandomLayout：随机布局；ForceLayout：经典力导向布局：CircularLayout：圆形布局；RadialLayout：径向布局；MDSLayout：高维数据降维算法布局；FruchtermanLayout：Fruchterman布局，一种力引导布局；DagreLayout：分层布局。Treemaplayout：DendrogramLayout：树状布局（叶子节点布局对齐到同一层）；CompactBoxLayout：紧凑的树形布局；MindmapLayout：思维导图布局；预期布局：缩进布局。constgraph=newG6.Graph({...//其他配置项layout:{//对象，可选，布局方式及其配置项，默认为随机布局。type:'force',//指定为Force-directedlayoutpreventOverlap:true,//防止节点重叠//nodeSize:30,//节点大小，用于算法中防止节点重叠时的碰撞检测。在上一节的元素配置中已经有linkDistance:100,//指定边距为100，并设置每个节点的size属性，所以这里不需要设置nodeSizecenter:[500,300]}});更多属性(https://g6.antv.vision/zh/doc...)3.3GraphInteractionBehaviorG6中的交互行为。G6内置了一系列用户可以直接使用的交互行为。简单理解，这些交互行为可以一键启用：drag-canvas：拖动画布；zoom-canvas：缩放画布。更多细节参见：InteractionBehaviorconstgraph=newG6.Graph({//...//其他配置项modes:{default:['drag-canvas','zoom-canvas','drag-node'],//允许拖动画布、缩放画布、拖动节点},});activate-relations含义：当鼠标移动到一个节点时，高亮显示该节点及其直接关联的节点和连接；参数：触发器：'mouseenter'。可以是mouseenter，表示鼠标移入时触发；也可以是click，鼠标点击时触发；activeState：'活动'。活动节点状态。当行为被触发时，需要高亮显示的节点和边都会有这个状态，默认值为active；可以结合图实例的nodeStyle和edgeStyle实现丰富的视觉效果。inactiveState：'不活动'。非活动节点状态。不需要突出显示的节点和边将附加此状态。默认值为*inactive。可以结合图实例的nodeStyle和edgeStyle实现丰富的视觉效果；resetSelected：高亮连接节点时是否重置选中节点，默认为false，即选中节点的状态不会被activate-relations覆盖；{type:'activate-relations',activeState:'actives',inactiveState:'inactives',resetSelected:false},//当前节点的多态样式nodeStateStyles:{actives:{opacity:1,lineWidth:0},inactives:{opacity:0.2,lineWidth:0}},edgeStateStyles:{actives:{opacity:1},inactives:{opacity:0.2}}(https://g6.antv.vision/zh/doc...)3.4监听和绑定某些事件全局事件只要发生在canvas范围内就会被触发，比如mousedown,mouseup,click,mouseenter,mouseleave等graph.on('click',(ev)=>{constshape=ev.target;constitem=ev.item;if(item){consttype=item.getType();}});canvas事件只在画布的空白处触发，如canvas:mousedown、canvas:click等，以canvas:eventName为事件名。graph.on('canvas:click',(ev)=>{constshape=ev.target;constitem=ev.item;if(item){consttype=item.getType();}});node/edge/combo上的事件，比如node:mousedown,edge:click,combo:click等，使用type:eventName作为事件名称。graph.on('node:click',(ev)=>{constnode=ev.item;//被点击的节点元素constshape=ev.target;//被点击的图可以根据信息做出不同的响应实现部分响应//...做某事});graph.on('edge:click',(ev)=>{constedge=ev.item;//被点击的边元素constshape=ev.target;//被点击的图可以根据信息做出不同的反应，实现局部response//...dosth});graph.on('combo:click',(ev)=>{constcombo=ev.item;//点击的组合元素constshape=ev.target;//点击的图形可以根据信息做出不同的反应，实现部分反应//...dosth});shape上的事件指定shape上的事件，如circle-shape:mousedown,circle-shape:click等，shapeName:eventName为事件名称。可用于响应部分图场景的绑定节点/边/组合。效果类似于上面的graph.on('node:click',fn)通过目标信息做出不同的反应。关于图的名称：内置node/edge/combo上每个图的名称可以通过graph.on('node:click',(ev)=>console.log(ev.target.get('name')))已知；要自定义node/edge/combo中addShape添加的图形，可以在attrs的同级添加name字段，指定任意（同一元素内唯一）字符串作为name。请注意，同一元素（节点/边缘/组合）中的不同图形应尝试给出不同的名称值。以下示例将点击事件侦听器绑定到图中所有名为circle-shape的图形：graph.on('circle-shape:click',(ev)=>{constshape=ev.target;//clickedGraphics//...做某事});定时事件定时事件是指渲染、视口变换、元素增删改查、数据变换等的定时。所有定时事件的详细信息参见G6的定时事件列表。如：beforeadditem、afteradditem等：node/edge/Combo状态改变时的事件：beforerefreshitem和afterrefreshitem；布局时机：beforelayout和afterlayout。以下示例在渲染完成时将图形绑定到监视器。在定时事件中，afterrender、afterlayout等事件必须在graph.render()或graph.read()之前绑定，以便在第一次渲染布局完成后监听相关事件。graph.on('afterrender',(ev)=>{//...做某事});自定义事件G6允许用户自定义任意事件，可以在任意位置通过graph.emit(customEventName:string,event:IG6GraphEvent)触发事件，第一个参数为自定义事件名称。在触发之前，通过graph.on(customEventName:string,callback:Function)监听。例如：graph.on('some-custom-event-name',(ev)=>{//...dosth});graph.emit('some-custom-event-name',{//someparams})ps:当数据多样化时，可以为不同的数据设置不同的节点或边样式data.nodes.forEach((node)=>{node.style={fill:node.type==='company'?'#EE5555':node.type==='director'?'#0F8CFF':'#FFC510',stroke:node.type==='company'?'#EE5555':node.type==='director'?'#0F8CFF':'#FFC510'}})data.edges.forEach((edge)=>{edge.style={stroke:edge.typest===0?'#EE5555':edge.typest===1?'#0F8CFF':'#FFC510'}edge.label=edge.typest===0?'Director':edge.typest===1?'Manager':edge.typest===2?'Staff':nulledge.labelCfg={style:{fill:edge.typest===0?'#EE5555':edge.typest===1?'#0F8CFF':'#FFC510'}}})