知识图谱可视化

安装

yarn add @yuntu/react
// or
npm install @yuntu/react

组件

通用配置

| 参数 | 说明 | 类型 | 默认值 | | ----------------- | --------------------------------------------------- | -------------------------------------- | --------- | -------- | | actions | 数据管理实例 | Actions | undefined | | canRegion | 是否可以框选(按住 shift 拖拽框选) | Boolean | false | | renderNode | 自定义 Node 渲染 | Vue 组件 | 内置渲染 | | renderEdge | 自定义 Edge 渲染 | Vue 组件 | 内置渲染 | 内置渲染 | | nodeEvents | 节点事件(click,dblclick,contextmenu 等) | {eventType: Function(node,d3Event)} | {} | | edgeEvents | 关系事件(click,dblclick,contextmenu 等) | {eventType: Function(edge,d3Event)} | {} | | graphEvents | 图事件(click,dblclick,contextmenu 等) | {eventType: Function(actions,d3Event)} | {} | | regionEvents | 框选事件(brushStart,brushMove,brushEnd,brushOffset) | {eventType: Function()} | {} | | onGraphLayoutEnd | 布局完成 | Function() | undefined | | disabledWheelZoom | 是否禁止鼠标滚轮缩放 | Boolean | false |

Force

图谱可视化组件

| 参数 | 说明 | 类型 | 默认值 | | --------- | -------------- | ----------------------- | --------- | | layout | 布局算法 | String|Class | 'force' | | graphData | 数据配置 | GraphData | undefined | | canDrag | 是否可以拖拽 | Boolean | true | | isFixed | 是否固定的定位 | Boolean | false |

Tree

图谱可视化组件

| 参数 | 说明 | 类型 | 默认值 | | --------- | -------- | --------------------------- | --------- | | graphData | 数据配置 | GraphData | undefined |

API

createForceActions()

此方法生成实例为图谱展示的数据管理实例，必不可少；

actions.addData(GraphData, isReplace = false)

往当前图谱中添加数据，数据格式固定；isReplace 为 true 的时候会替换当前所有数据

deleteNodeByIds([ids], deleteAloneNodes = false)

根据节点 ids 删除节点以及关联的边，如果deleteAloneNodes === true，会连带删除孤立点，这里有两个逻辑（1.有主节点，会删除所有不和主节点关联的节点 2.没有主节点，删除所有孤立节点）

deleteEdgeByIds([ids], deleteAloneNodes = false)

根据边 ids 删除边，如果deleteAloneNodes === true，会连带删除孤立点，这里有两个逻辑（1.有主节点，会删除所有不和主节点关联的节点 2.没有主节点，删除所有孤立节点）

actions.prev()

撤销，当actions.prevStack.length !== 0的时候可以调用

actions.next()

重做，当actions.nextStack.length !== 0的时候可以调用

actions.fixedNode(node)

钉住节点（钉住后图布局将不会对钉住的节点布局，钉住后点的的属性fixed===true）；如果已经钉住的再次调用将会解除锁定

actions.fixedNodes(nodes)

钉住所有节点

actions.unFixedNodes(nodes)

解除钉住节点

actions.setAllMode(mode='default')

设置所有点和边的模式，可选的有[default,highlight,unHighlight]

actions.highlightNode(node)

设置点高亮（同时和它连接的点和边变成default，其他的点和边变成unHighlight）

actions.highlightEdge(edge)

设置边高亮（同时和它连接的点变成default）

actions.exportImage(fileName)

当前图谱保存为图片，格式支持 jpeg|png|svg。（注：如果有样式，需要把样式放到组件范围内，不然下载的图片样式会丢失）

actions.adaption(minScale=undefined)

自适应当前视图大小；minScale为最小缩放量

actions.zoomTo(scale)

缩放为原图的 scale 倍

actions.reLayout()

重新布局

actions.focus(node)

聚焦到某个节点

actions.focusById(nodeId)

聚焦到某个节点

actions.packNode(node)

收缩某节点的叶子节点

createTreeActions()

此方法生成实例为图谱展示的数据管理实例，必不可少；大部分 api 和 Force 一致

actions.addData(GraphData)

往当前图谱中添加数据，数据格式固定；会替换当前所有数据

Layout

内置了以下布局

{
    force: '力导布局',
    tree: '树形布局',
    grid: '网格布局'
}

如果需要实现自定义布局，需要继承BasicLayout类实现

数据说明

Node

{
    id: String,
    type: String,
    label: String,
    nodeSize?: Number,  // default: 60
    ...other
}

Edge

{
    id: String,
    target: String,
    source: String,
    type: String,
    label: String,
    strokeWidth?: Number, // default: 1
    ...other
}

GraphData

{
    nodes: Node[],
    edges: Edge[]
}

TreeGraphData

{
    id: String,
    type: String,
    label: String,
    width?: Number,     // tree
    height?: Number,    // tree
    ...other,
    top?: [Node],
    bottom?: [Node],
    left?: [Node],
    right?: [Node],
}