@tntv/react-graph

知识图谱可视化

组件

通用配置

参数	说明	类型	默认值
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))

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

🎉 🎉 🎉 🙈