乐趣区

关于前端:G6graph快速入门

1 疾速上手

1.1 在我的项目中应用 npm 包引入
Step 1: 应用命令行在我的项目目录下执行以下命令
npm install --save @antv/g6
Step 2: 在须要用的 G6 的 JS 文件中导入
import G6 from '@antv/g6';
1.2 在 HTML 中应用 CDN 引入
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script>
留神
  • 在 {$version} 中填写版本号,例如 3.2.0
  • 最新版为 3.2.0,能够在 npm 查看最新版本;
  • 详情参考 Github 分支:https://github.com/antvis/g6/tree/master。

    2 疾速试用

    创立一个 G6 的关系图仅须要上面几个步骤:
  • 创立关系图的 HTML 容器;
  • 数据筹备;
  • 创立关系图;
  • 配置数据源,渲染。
Step 1: 创立容器
<div id="mountNode"></div>
Step 2: 数据筹备

引入 G6 的数据源为 JSON 格局的对象。该对象中须要有节点(nodes)和边(edges)字段,别离用数组示意:

const data = {
  // 点集
  nodes: [
    {
      id: 'node1', // String,该节点存在则必须,节点的惟一标识
      x: 100, // Number,可选,节点地位的 x 值
      y: 200, // Number,可选,节点地位的 y 值
    },
    {
      id: 'node2', // String,该节点存在则必须,节点的惟一标识
      x: 300, // Number,可选,节点地位的 x 值
      y: 200, // Number,可选,节点地位的 y 值
    },
  ],
  // 边集
  edges: [
    {
      source: 'node1', // String,必须,起始点 id
      target: 'node2', // String,必须,指标点 id
    },
  ],
};
留神
  • nodes 数组中蕴含节点对象,惟一的 id 是每个节点对象中必要的属性,xy 用于定位;
  • edges 数组中蕴含边对象,source 和 target 是每条边的必要属性,别离代表了该边的起始点 id 与 指标点 id
  • 点和边的其余属性参见链接:图元素配置文档。

    Step 3: 创立关系图

    创立关系图(实例化)时,至多须要为图设置容器、宽和高。

    const graph = new G6.Graph({
      container: 'mountNode', // String | HTMLElement,必须,在 Step 1 中创立的容器 id 或容器自身
      width: 800, // Number,必须,图的宽度
      height: 500, // Number,必须,图的高度
    });
    Step 4: 配置数据源,渲染

    创立关系图(实例化)时,至多须要为图设置容器、宽和高。

    graph.data(data); // 读取 Step 2 中的数据源到图上
    graph.render(); // 渲染图
    最终的后果

3 配置

3.1 元素及其配置

图的元素特指图上的节点 Node 和边 Edge,不论是节点还是边,它们的属性分为两种:

  • 款式属性 style:对应 Canvas 中的各种款式,在元素状态 State 发生变化时,能够被扭转;
  • 其余属性 :例如图形(shape)、id(id)一类在元素状态 State 发生变化时不能被扭转的属性。
    例如,G6 设定 hover 或 click 节点,造成节点状态的扭转,只能主动扭转节点的 款式属性 (如 fillstroke 等 其余属性 (如 shape 等)不能被扭转。如果须要扭转其余属性,要通过 graph.updateItem 手动配置。 款式属性 是一个名为 style 的对象,style 字段与其余属性并行。

以节点元素为例,其属性的数据结构如下:

{
  id: 'node0',          // 元素的 id
  shape: 'circle',      // 元素的图形
  size: 40,             // 元素的大小
  label: 'node0'        // 标签文字
  labelCfg: {           // 标签配置属性
    positions: 'center',// 标签的属性,标签在元素中的地位
    style: {            // 包裹标签款式属性的字段 style 与标签其余属性在数据结构上并行
      fontSize: 12      // 标签的款式属性,文字字体大小
    }
  }
  // ...,                  // 其余属性
  style: {              // 包裹款式属性的字段 style 与其余属性在数据结构上并行
    fill: '#000',       // 款式属性,元素的填充色
    stroke: '#888',     // 款式属性,元素的描边色
    // ...                 // 其余款式属性
  }
}

边元素的属性数据结构与节点元素类似,只是其余属性中多了 source 和 target 字段,代表起始和终止节点的 id

全局配置

实用场景:所有节点对立的属性配置,所有边对立的属性配置。应用形式:应用图的两个配置项:

defaultNode:节点在默认状态下的款式属性(style)和其余属性;
defaultEdge:边在默认状态下的款式属性(style)和其余属性。

defaultNode: {
    size: 30, // 节点大小
    // ...                 // 节点的其余配置
    // 节点款式配置
    style: {
      fill: 'steelblue', // 节点填充色
      stroke: '#666', // 节点描边色
      lineWidth: 1, // 节点描边粗细
    },
    // 节点上的标签文本配置
    labelCfg: {
      // 节点上的标签文本款式配置
      style: {fill: '#fff', // 节点标签文字色彩},
    },
  },
  // 边在默认状态下的款式配置(style)和其余配置
  defaultEdge: {
    // ...                 // 边的其余配置
    // 边款式配置
    style: {
      opacity: 0.6, // 边透明度
      stroke: 'grey', // 边描边色彩
    },
    // 边上的标签文本配置
    labelCfg: {autoRotate: true, // 边上的标签文本依据边的方向旋转},
  },
3.2 应用图布局 Layout

当数据中没有节点地位信息,或者数据中的地位信息不满足需要时,须要借助一些布局算法对图进行布局。G6 提供了 7 种个别图的布局和 4 种树图的布局:

个别图:
  • Random Layout:随机布局;
  • Force Layout:经典力导向布局:
  • Circular Layout:环形布局;
  • Radial Layout:辐射状布局;
  • MDS Layout:高维数据降维算法布局;
  • Fruchterman Layout:Fruchterman 布局,一种力导布局;
  • Dagre Layout:档次布局。
树图布局:
  • Dendrogram Layout:树状布局(叶子节点布局对齐到同一层);
  • CompactBox Layout:紧凑树布局;
  • Mindmap Layout:脑图布局;
  • Intended Layout:缩进布局。
const graph = new G6.Graph({
  ...                      // 其余配置项
  layout: {                // Object,可选,布局的办法及其配置项,默认为 random 布局。type: 'force',         // 指定为力导向布局
    preventOverlap: true,  // 避免节点重叠
    // nodeSize: 30,       // 节点大小,用于算法中避免节点重叠时的碰撞检测。因为曾经在上一节的元素配置中
    linkDistance: 100,     // 指定边间隔为 100 设置了每个节点的 size 属性,则不须要在此设置 nodeSize。center: [500, 300]
  }
});

更多属性(https://g6.antv.vision/zh/doc…)

3.3 图的交互 Behavior

G6 中的交互行为。G6 内置 了一系列交互行为,用户能够间接应用。简略地了解,就是能够一键开启这些交互行为:

  • drag-canvas:拖拽画布;
  • zoom-canvas:缩放画布。

更多详见:交互行为 Behavior

const graph = new G6.Graph({
  // ...                                          // 其余配置项
  modes: {default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 容许拖拽画布、放缩画布、拖拽节点
  },
});
  • activate-relations
    含意:当鼠标移到某节点时,突出显示该节点以及与其间接关联的节点和连线;

参数:

  • trigger: ‘mouseenter’。能够是 mousenter,示意鼠标移入时触发;也能够是 click,鼠标点击时触发;
  • activeState: ‘active’。沉闷节点状态。当行为被触发,须要被突出显示的节点和边都会附带此状态,默认值为 active;能够与 graph 实例的 nodeStyle 和 edgeStyle 联合实现丰盛的视觉效果。
  • inactiveState: ‘inactive’。非沉闷节点状态。不须要被突出显示的节点和边都会附带此状态。默认值为 * inactive。能够与 graph 实例的 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 监听和绑定事件
  • 全局事件
    只有在画布上范畴内产生均会被触发,如 mousedown,mouseup,click,mouseenter,mouseleave 等。

    graph.on('click', (ev) => {
    const shape = ev.target;
    const item = ev.item;
    if (item) {const type = item.getType();
    }
    });
  • canvas 事件
    只在 canvas 空白处被触发,如 canvas:mousedown,canvas:click 等,以 canvas:eventName 为事件名称。

    graph.on('canvas:click', (ev) => {
    const shape = ev.target;
    const item = ev.item;
    if (item) {const type = item.getType();
    }
    });
  • 节点 / 边 /combo 上的事件
    例如 node:mousedown,edge:click, combo:click 等,以 type:eventName 为事件名称。

    graph.on('node:click', (ev) => {
    const node = ev.item; // 被点击的节点元素
    const shape = ev.target; // 被点击的图形,可依据该信息作出不同响应,以达到部分响应成果
    // ... do sth
    });
    
    graph.on('edge:click', (ev) => {
    const edge = ev.item; // 被点击的边元素
    const shape = ev.target; // 被点击的图形,可依据该信息作出不同响应,以达到部分响应成果
    // ... do sth
    });
    
    graph.on('combo:click', (ev) => {
    const combo = ev.item; // 被点击 combo 元素
    const shape = ev.target; // 被点击的图形,可依据该信息作出不同响应,以达到部分响应成果
    // ... do sth
    });
  • 图形上的事件
    指定图形上的事件,如 circle-shape:mousedown,circle-shape:click 等,以 shapeName:eventName 为事件名称。可用于绑定节点 / 边 /combo 中对部分图形做出响应的场景。成果相似上文 graph.on(‘node:click’, fn) 中通过 target 信息作出不同响应。

对于图形的 name:

内置节点 / 边 /combo 上每个图形的名称在开发过程中能够通过 graph.on(‘node:click’, (ev) => console.log(ev.target.get(‘name’))) 得悉;

自定义节点 / 边 /combo 中通过 addShape 减少的图形,可增加与 attrs 平级的 name 字段指定任意(同元素中惟一)字符串作为 name。请留神同个元素(节点 / 边 /combo)中不同图形尽量给予不同的 name 值。

上面例子为图中所有 name 为 circle-shape 的图形绑定了 click 事件监听:

graph.on('circle-shape:click', (ev) => {
  const shape = ev.target; // 被点击的图形
  // ... do sth
});
  • 机会事件

机会事件指渲染、视口变换、元素增删改、数据变换等机会。所有机会事件详见 G6 的机会事件列表。如:beforeadditemafteradditem  等:

  • 节点 / 边 /Combo 状态扭转时的事件:beforerefreshitem 与 afterrefreshitem
  • 布局机会:beforelayout 与 afterlayout

上面例子为 graph 绑定了渲染实现机会的监听。机会事件中,afterrender、afterlayout 一类事件必须在 graph.render() 或 graph.read() 之前绑定,方可监听到首次渲染、布局实现后的相干事件。

graph.on('afterrender', (ev) => {// ... do sth});
  • 自定义事件

G6 容许用户自定义任意事件,可在任意地位通过 graph.emit(customEventName: string, event: IG6GraphEvent) 触发一个事件,第一个参数为自定义事件名称。在触发前,通过 graph.on(customEventName: string, callback: Function) 进行监听。例如:

graph.on('some-custom-event-name', (ev) => {// ... do sth});
graph.emit('some-custom-event-name', {// some params})
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
    ? '董事'
    : edge.typest === 1
      ? '经理'
      : edge.typest === 2
        ? '职员'
        : null
  edge.labelCfg = {
    style: {
      fill: edge.typest === 0
        ? '#EE5555'
        : edge.typest === 1
          ? '#0F8CFF'
          : '#FFC510'
    }
  }
})
退出移动版