@tntv/react-graph v1.0.22

知识图谱可视化

组件

通用配置

Force

图谱可视化组件

Tree

图谱可视化组件

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: