graph.canvas 图渲染组件说明

简单使用

引用hz-graph-canvas，然后参考app.js 的调用

import GraphCanvas from 'hz-graph-canvas'
import GraphData from './data/mockGraph'

const force = new GraphCanvas(canvas.current, {
  data: GraphData,
})
force.init()

定制化使用

由于图渲染组件都是纯js文件。如果需要定制化开发一些复杂的图析功能。可以采用继承的方式重写部分关键代码

// force.business.js
import ForceCanvas from 'hz-graph-canvas'
export default class ForceBusiness extends ForceCanvas {
  constructor(ele, options) {
      super(ele, options)
      this.state = {}
      if (!Object.__proto__) { // 兼容ie10
          ForceCanvas.call(this, ele, options)
      }
  }
  // 重写draw函数
  draw() {

  }
}

// 使用定制化后的图析组件
import ForceBusiness from './force.business.js'
import GraphData from './data/mockGraph'

const force = new ForceBusiness(canvas.current, {
  data: GraphData,
})
force.init()

参数说明

{
    width: window.innerWidth, // 画布宽度
    height: window.innerHeight, // 画布高度
    data: { vertexes: [], edges: [] }, // 图谱数据
    theme: 'pure', // 默认纯净主题（业务配置）
    radius: 20, // 节点默认大小
    lineWidth: 1, // 边默认粗细
    force_to_ring_optimization: false, // force_to_ring_optimization为true时，表示force布局在数据量小的情况下直接采用 ring 布局，提高渲染速度
    // boldLineWidth: 2, // 数据需要鼠标悬浮时高亮路径时的路径线条粗细
    fontSize: 10, // 文案默认大小
    optimizeVertexThreshold: 500, // 触发渲染优化所需要的最小节点个数（目前看好像是有节点的附加样式的展示、边label的展示）
    zoomOptimize: { // 缩放优化
        enableOptimize: true, // 是否开启优化
        optimizeMaxVertex: 500, // 触发缩放优化所需要的最小节点个数
        optimizeMaxEdge: 500
    },
    // fontFamily: 'PingFang SC, Microsoft YaHei, Helvetica, Arial, Verdana, sans-serif',
    fontFamily: 'character, PingFang SC, Microsoft YaHei, Helvetica, Arial, Verdana, sans-serif, iconfont, FontAwesome', // 默认字体
    displayTextThreshold: 0.5, // 字体展示的缩放阈值，默认放大到 0.5 倍时才展示节点中的文字
    arrowLength: 5, // 边箭头斜边长度
    arrowDt: Math.PI / 6, // 箭头斜边与边的夹脚
    scaleExtent: [0.01, 2],
    canvasShift: [0, 0], // left, top shift
    // highlightEdgeWidth: 4,
    // 不同主题对应的节点边默认颜色
    light: {
        vertex: '#4FA2F1',
        edge: '#64C69F',
        centerVertex: '#EF4772'
    },
    deep: {
        vertex: '#82C896',
        edge: '#4FA2F1'
    },
    mix: {
        vertex: '#FFFFFF',
        edge: '#5A5D7A'
    },
    pure: {
        vertex: '#82C896',
        edge: '#4FA2F1'
    },
    onRenderEnd: () => { },
    onClickVertex: () => { },
    onClickEdge: () => { },
    onZoom: () => { },
    onRenderEndProcessData: () => {},
    onRenderEndAni: () => {},
    onDragStart: () => {},
    onClickOutSide: () => {},
    onContextmenu: () => {},
    onHoverVertexAndEdge: () => {},
    layout: { // 布局类型
        /**
         * force: 力导向布局
         * card: 卡片式布局
         * tree: 树状布局
         * grid: 网格布局
         * flow: 流向布局
         * horization: 横向布局
         * annular: 环状布局
         * octopus: 八爪鱼布局
         * random: 随机布局
        */
        type: 'force'
    },
    vertex: {
        type: 'circle',
        vertexRadiusMap: {  //节点大小映射列表，对应节点数据属性uiconfig.size
            1: 30,
            2: 25,
            3: 20,
        }
    },
    edge: {
        type: 'line',
        edgeLineWidthMap: { //边尺寸映射列表，对应边数据属性uiconfig.size
            '1': 3,
            '2': 2,
            '3': 1,
            'xSmall': 1,
            'small': 1,
            'normal': 1,
            'large': 1,
            'xLarge': 1,
        }
    },
    combo: {
        type: 'circle'
    },
    cardWidth: 166, // 树状卡片式布局卡片宽度
    cardHeight: 60, // 树状卡片式布局卡片高度
    graphCenterBy: 'POS', // 'NODE' 中心节点居中 || 'POS' 图数据中心位置居中
    vertexClickConfig: { // 节点点击配置
        isNormalRelateVertex: true // 是否将关联的实体置为正常状态
    },
    minMap: {
        show: true, //是否显示小地图
        id: 'thumbnail', // 绘制小地图canvas id 默认值 thumbnail
        operationId: 'thumbnailOperation' // 绘制小地图操作项 id 默认值 thumbnailOperation
    },
    showEdgeLabel: true, // 是否默认展示关系label
    showVertexLabel: true, // 是否默认展示实体label
    animationOptions: { // 动画的配置提供（目前仅布局切换以及展开）
        isAnimateActive: false, // 是否开启
        animateDuration: 1000, // 可选 动画持续时间
        animationCurve: null //可选 动画执行曲线函数 
    }，
    octopusOptions: { // 八爪鱼布局的参数 如果不调用内置的api转化数据，需要提供如下以保证功能可用
        levelDataMap: new Map() // 层级关系
        foldVertexMap: new Map() // 存储八爪鱼的节点收起后的各自的归属关系
    }
}

graphData 说明

• graphData

|参数名|必选|类型|说明| |:----- |:----- |:-----|----- | |vertexes | 是 |Array |节点列表 | |edges | 是|Array |边列表 | |gdbUiConfig | 否 |object |图样式对象 |

• 单个顶点vertex参数

|参数名|必选|类型|说明| |:----- |:----- |:-----|----- | |_id|是|string|顶点id，当需要自定义使用八爪鱼布局时 指定为OctopusNode/123456 |_tag|否|string|实体标记(起点START、终点END)，可以为NULL = [‘START’, ‘END’, ‘MARK’] |_label|是|string|显示内容(由可视化配置(如 ${name}-{sex} )决定) |fieldUiConfigs|否|Array|字段的可视化样式配置，可以为NULL |schemaInfo|是|object|表基本信息 |timelineFieldValue|否|date|时间轴字段值,可以为NULL |uiConfig | 是| object |顶点/边的样式对象 |x|是|double |横坐标 |y|是|double |纵坐标 |octopusInfo|否|object|使用八爪鱼布局且不调用内置api转化数据时需要提供的数据

• 单个边edge参数

|参数名|必选|类型|说明| |:----- |:----- |:-----|----- | |_id|是|string|顶点id,当需要自定义使用八爪鱼布局时 OctopusEdge/123456 |_from|是|string|本边对应的起始节点id |_to|是|string|本边对应的结束节点id |_label|是|string|显示内容(由可视化配置(如 ${name}-{sex} )决定) |fieldUiConfigs|否|Array|字段的可视化样式配置，可以为NULL |schemaInfo|是|object|表基本信息 |timelineFieldValue|否|date|时间轴字段值,可以为NULL |uiConfig | 是| obect |顶点/边的样式对象 |source|是|object|本边对应的起始节点vertex对象 |target|是|object|本边对应的结束节点vertex对象

• schemaInfo 表基本信息

|参数名|必选|类型|说明| |:----- |:----- |:-----|----- | |directed|是|boolean|是否有方向 |schemaName|是|string|图元所属表物理名称 |schemaNameCn|是|string|图元所属表中文名称

• 外观uiConfig参数

|参数名|必选|类型|说明| |:----- |:----- |:-----|----- | |color|是|string|颜色，色值 |radius|是|number|尺寸(半径) |style|是|string|图标，iconfont的class |shape|是|string|形状，实体独有，根据0-8映射

• 实体形状shape参数

|形状id|对应形状| |:----- |:----- | |'1'|圆形 |'2'|方形 |'3'|三角形 |'4'|五角星 |'5'|菱形 |'6'|五边形 |'7'|六边形 |'8'|椭圆 |'0'|无形状，即如只有图标则只展示图标，实际还是圆形打底

• octopusInfo 八爪鱼布局下的实体数据

|参数名|类型|说明| |:----- |:----- |:----- | |octopusEdges|array|关系转化前的原始id数组 |downStreamNode|array|下游节点的id数组 |upStreamNode|string|上游节点id

八爪鱼布局的使用

• 目前提供两种方式来使用，一种是调用内置api完成八爪鱼特定数据的转化即可使用 另外一种可手动提供所需要的数据以及必要参数则无需转换。
• 详细可看如上参数说明,结合项目下demo有简单演示