@tntv/react-graph

1.0.18 • Public • Published

知识图谱可视化

组件

通用配置

参数 说明 类型 默认值
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-forced3-quadtreed3-timer,因为他们内部包含了箭头函数、const

规划功能

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

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

🎉 🎉 🎉 🙈

Readme

Keywords

Package Sidebar

Install

npm i @tntv/react-graph

Weekly Downloads

0

Version

1.0.18

License

ISC

Unpacked Size

174 kB

Total Files

41

Last publish

Collaborators

  • ezios
  • td-tnt
  • bruceliu68
  • zhouzefei
  • xiaofei.wang
  • mizy