基于g6的关系图插件

用于创建一个关系图

ReGraph.create(options) options:

/** * 容器id * @type {string} */ container: '', /** * 数据({nodes: [], edges: []}) * @type {array} */ data: {}, /** * 画布宽度 * @type {number} */ width: 0, /** * 画布高度 * @type {number} */ height: 0, /** * 默认是直线，type可选：polyline, polyline-round（直角折线，圆角折线） * @type {string} */ edgeCfg: { shape: 'default', // color: '#AAB7C4', //设置颜色节点hover，高亮关系线功能失效 }, /** * 是否支持缩略图 * @type {boolean} */ enableMinimap: true, /** * 缩略图配置 * @type {boolean} */ minimapCfg: { container: '', width: 180, height: 120, }, /** * 是否支持拖拽画布来平移画布 * @type {boolean} */ enablePanBlank: true, /** * 是否支持缩放 * @type {boolean} */ enableZoom: true, /** * 控制允许的交互 * @type {array} */ allowBehaviours: ['mouseEnterHighlightRelation', 'mouseLeaveResetRelation'], /** * 交互的配置相关 * @type {array} */ behavioursCfg: { highlight: { targetColor: '', sourceColor: '', beforeEnter: null, //参数：item, graph beforeLeave: null, // 参数：item, graph, originColor（线原始的颜色） }, }, /** * 设置节点tooltip内容 * @type {function} * @param model * @param originalData */ ToolTipFormatter: null, /** * 节点点击事件 * @type {function} * @param item */ nodeClick: null, destroy

销毁关系图

ReGraph.destroy() read

读取数据（如果options中有data，这个可以不用使用）

ReGraph.read(data) Utils

工具类

formatData：执行read(data)前需要格式化data数据，将原始数据列表中对象key值映射到插件数据格式上（如果原始数据和所需格式一样，则不需要转换）

// 不使用该方法需要提供如下格式 { nodes: [{ id, label, fields }], edges: [{ id, target, source, target_field, source_field }], } // 只有关系数据可以使用该方法转换成以上格式 const formattedData = ReGraph.Utils.formatData(data, { id: 'id', target: 'target_table_id', target_name: 'target_table', target_field: 'target_field', source: 'source_table_id', source_name: 'source_table', source_field: 'source_field', })