知识图谱可视化

组件

通用配置

| 参数 | 说明 | 类型 | 默认值 | | ---------------- | --------------------------------------------------- | -------------------------------------- | --------- | | actions | GraphRootStore 实例 | GraphRootStore | undefined | | width | 容器宽度(不设置的时候内部自动读取) | Number | undefined | | height | 容器高度(不设置的时候内部自动读取) | Number | undefined | | canRegion | 是否可以框选 | Boolean | false | | renderNode | 自定义 Node 渲染 | React.ReactNode | 内置渲染 | | renderEdge | 自定义 Edge 渲染 | React.ReactNode | 内置渲染 | | 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 | | className | 自定义类名 | Function() | undefined |

Force

图谱可视化组件

| 参数 | 说明 | 类型 | 默认值 | | ---------------- | ---------------- | ----------------------- | --------- | | layout | 布局算法 | String|Class | 'force' | | layoutConfig | 布局配置 | Object | undefined | | graphData | 数据配置 | GraphData | undefined | | canDrag | 是否可以拖拽 | Boolean | true | | graphCanDrag | 画板是否可以拖拽 | Boolean | true | | disableWheelZoom | 禁用鼠标滚轮缩放 | Boolean | false | | isFixed | 是否固定的定位 | Boolean | false |

Tree

图谱可视化组件

| 参数 | 说明 | 类型 | 默认值 | | --------- | ---------------- | ----------------------- | --------- | | graphData | 数据配置 | GraphData | undefined | | ranksep | 每层之间间距 | Number | 50 | | nodesep | 同层节点之间间距 | Number | 10 | | groupsep | 各个组之间间距 | Number | 0 | | align | 层级间对齐 | Boolean | true |

API

createActions()

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

actions.addData(GraphData, isReplace = false)

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

actions.savePic(fileType)

当前图谱保存为图片，格式支持 jpeg|png|svg

actions.adaption(padding=30, minScale=undefined)

自适应当前视图大小；padding为四周间隔，minScale为最小缩放量

actions.zoomIn(step=0.1)

放大，setp 为百分比

actions.zoomOut(step=0.1)

缩小，setp 为百分比

actions.zoomTo(scale)

缩放为原图的 scale 倍

actions.relayout()

重新布局

actions.focus(nodeId)

聚焦到某个节点

Layout

内置了以下布局，可以在 ReactGraph 里配置

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

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

utils

shortestPath

最短路径计算

fullPath(number)

n 度以内全路径计算

isomorphicAnalysis(GraphData)

同构图分析，返回分析后的同构图

数据说明

Node

{
    id: String,
    type: String,
    label: String,
    x: Number,
    y: Number,
    nodeSize: Number,
    mode: String<default|highlight|unHighlight>,
    ...other
}

Edge

{
    id: String,
    target: String,
    source: String,
    type: String,
    label: String,
    strokeWidth: Number,
    isDirected:false,
    ...other
}

GraphData

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

其他

注意：如果需要兼容 ie11，打包的 babel 的配置里面请不要排除d3-force、d3-quadtree和d3-timer，因为他们内部包含了箭头函数、const

规划功能

动画：路径分析后出来的结果是否可以以动画的形式展示 eg: pipe(animate(node1), animate(edge1), animate(node2), animate(edge2), animate(node3))

图形扩展：圆形、矩形、椭圆

:tada: :tada: :tada: :see_no_evil: