知识图谱可视化
API
createForceActions()
此方法生成实例为图谱展示的数据管理实例,必不可少;
GraphData, isReplace = false)
actions.addData(往当前图谱中添加数据,数据格式固定;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)
收缩某节点的叶子节点
Layout
内置了以下布局
{
force: '力导布局',
tree: '树形布局',
grid: '网格布局'
}
如果需要实现自定义布局,需要继承BasicLayout
类实现
数据说明
Node
{
id: String,
type: String,
label: String,
nodeSize: 60,
...other
}
Edge
{
id: String,
target: String,
source: String,
type: String,
label: String,
...other
}
GraphData
{
nodes: Node[],
edges: Edge[]
}