0.0.1 • Published 2 years ago
wmf-kgraph v0.0.1
wmf-kgraph(威士顿知识图谱组件)
概述
威士顿知识图谱组件是知识图谱应用的可视化关系展示图。
快速上手
引用 wmf-kgraph
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="wmf-kgraph-x.x.x.min.js"></script>
</head>
</html>绘制一个简单的图
在绘图前我们需要为 wmf-kgraph 准备一个定义了高宽的 DOM 容器。在刚才的例子 之后，添加
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>然后就可以通过 wmfGraph.draw 方法初始化一个 wmfGraph 实例并生成一个简单的关系图，下面是完整代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>wmf-kgraph</title>
<script src="wmf-kgraph-1.0.0.min.js.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
wmfGraph.draw("main", {
nodes: [
{ data: { id: 'a', label:'a', detail:'a desc' } },
{ data: { id: 'b', label:'b', detail:'b desc' } }
],
edges: [
{ data: { id: 'ab', source: 'a', target: 'b', label:'ab' } }
]
})
</script>
</body>
</html>API
事件绑定
/// 事件绑定
/// -- eventName 事件名称
/// -- eventHandle 事件处理句柄
wmfGraph.on(eventName, eventHandle)
/// 使用方法
// 菜单事件绑定（menuClick）
wmfGraph.on("menuClick", function (menuName, node){
if(menuName) // TODO
})
// 节点点击事件
wmfGraph.on("nodeclick", function (node, grapher) {
console.log("执行了点击事件 node data", node.data())
// 返回false阻止默认事件（关闭菜单...）
return true
})设置点击菜单
/// 设置节点点击菜单
/// -- menus 菜单选项
/// -- nodeOrId 节点或节点Id(设置单个节点时使用)
/// 单个菜单已数据里的菜单为准（data.menus）
wmfGraph.setMenus(menus, nodeOrId)
// 使用方法
wmfGraph.setMenus([
{ name: "expand-node", title: "展开节点" },
{ name: "remove-node", title: "删除节点" },
{ class: "wsd-split" },
{ name: "update", title: "更新数据" },
{ name: "update-edge", title: "调整线条" },
{ class: "wsd-split" },
{ name: "addani", title: "添加动画" },
{ name: "removeani", title: "删除动画" }
])
// 菜单事件监控
wmfGraph.on("menuClick", function (eventName, node) {
if (eventName === 'expand-node') {
// TODO
return
}
})添加节点
/// 添加节点
/// -- elements 节点元素数据（节点+关系）
wmfGraph.addNode(elements)
// 使用方法
wmfGraph.addNode({nodes:[{data:{id:'a2',label:'a2',detail:'a2 desc'}},{data:{id:'b2',label:'b2',detail:'b2 desc'}}],edges:[{data:{id:'a2b2',source:'a2',target:'b2',label:'ab'}}]})删除节点
/// 删除节点
/// -- nodeOrId 节点对象或节点Id
wmfGraph.removeNode(nodeOrId)展开节点
/// 展开节点
/// -- nodeOrId 节点对象或节点Id
/// -- subElements 子节点元素数据（节点+关系）
wmfGraph.expandNode(nodeOrId, subElements)更新节点数据
/// 更新节点数据
/// -- nodeOrId 节点对象或节点Id
/// -- data 数据(menus菜单数据，animation动画数据....)
wmfGraph.updateNode = function(nodeOrId, data)
// 使用方法
wmfGraph.updateNode('a', {
label:"11111",
image:'./images/warning.png',
detail: '<div style="color:red;">新的详细信息</div>',
})添加动画
/// 添加动画
/// -- nodeOrId 节点对象或节点Id
/// -- animation 动画配置
/// {name:'flash', style:{'border-with':10, 'border-color':'red'}, duration: 1000}
wmfGraph.addNodeAnimation(nodeOrId, animation)
// 使用方法
wmfGraph.addNodeAnimation('a', { name: 'flash' })删除指定动画效果
/// 删除指定动画效果
/// -- nodeOrId 节点对象或节点Id
/// -- name 动画名称
wmfGraph.removeNodeAnimation(nodeOrId, name)
// 使用方法
wmfGraph.removeNodeAnimation('a', 'flash')更新线条数据
/// 更新线条数据
/// -- edgeOrId 线条对象或线条id
/// -- data 更新的数据
wmfGraph.updateEdge(edgeOrId, data)
// 使用方法
wmfGraph.updateEdge('ab', {"lineStyle": "red", classes: "bezier"})设置节点点击菜单
/// 设置节点点击菜单
/// -- menus 菜单选项
/// [{name:'menu1',title:'菜单1'}...]
/// -- nodeOrId 节点或节点Id(设置单个节点时使用)
wmfGraph.setMenus(menus, nodeOrId)
/// 使用方法
wmfGraph.setMenus([
{ name: "expand-node", title: "展开节点" },
{ name: "remove-node", title: "删除节点" },
{ class: "wsd-split" },
{ name: "update", title: "更新数据" },
{ name: "update-edge", title: "调整线条" },
{ class: "wsd-split" },
{ name: "addani", title: "添加动画" },
{ name: "removeani", title: "删除动画" }
])0.0.1
2 years ago