@yuntu/react v1.0.0
知识图谱可视化
安装
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],
}