知识图谱html页面

7 篇文章 1 订阅
3 篇文章 0 订阅

演示：

<!DOCTYPE html>
<html lang="en">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>

<body>
<div id='cxk'></div>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.5.0/dist/g6.min.js"></script>
<script>
const data = {
nodes: [
{
id: 'node1',
label: '向量计算',
type: 'circle',
mi: '未掌握该技能',
zi: '向量计算描述',
flag: 'b',

},

{
id: 'node2',
label: '矩阵加减',
type: 'circle',
mi: '掌握该技能',
zi: '矩阵的加减运算',
flag: 'a',
}
,

{
id: 'node3',
label: '加减法',
type: 'circle',
mi: '未掌握该技能',
zi: '加减法',
flag: 'b',
}
],
edges: [
{
source: 'node1',
target: 'node2',
label: '学会skill才能学会skill2',
},
{
source: 'node1',
target: 'node3',
label: '学会skill才能学会skill2',
}
,
{
source: 'node2',
target: 'node3',
label: '学会skill才能学会skill2',
}
],
};
const graph = new G6.Graph({
container: 'cxk',
width: 1800,
fitCenter: true,
height: 800,
//fitView: true,
//fitViewPadding: [20, 40, 50, 20],
defaultEdge: {
type: 'cubic',
color: 'blue',
lineWidth: 12,
style: {
endArrow: true,
lineWidth: 2,
stroke: '#666'
},
labelCfg:{
style:{
fontSize:20,
},
},
},
defaultNode:{
size:80,
style: {
fill: '#bae637',
stroke: '#eaff8f',
lineWidth: 5,
},
top: true,
bottom: true,
left: true,
right: true,
fill: 'skyblue',
size: 5,
},
labelCfg:{
style:{
fontSize:25,
fontFamily:'楷体',
fontWeight:1000,
},
},
},
layout: {
type: 'force',
preventOverlap: true,
nodeSpacing:20,
},
modes: {
default: [
{
type: 'drag-node',
},
{
type: 'zoom-canvas',

},
{
type: 'activate-relations',
},
{
type: 'tooltip',
formatText(model) {
return '名称：' + model.label + '<br/>描述：' + model.mi;
},
offset: 15,
},
{
type: 'edge-tooltip',
formatText(model) {
return model.label;
},
offset: 15,
},
{
type: 'brush-select',
},
],
},
nodeStateStyles: {
hover: {
fill: 'lightsteelblue',
},
click: {
stroke: '#000',
lineWidth: 3,
},
},
edgeStateStyles: {
click: {
stroke: '#000',
lineWidth: 3,
},
},
});

graph.on('node:mouseenter', e => {
const nodeItem = e.item;
graph.setItemState(nodeItem, 'hover', true);
});
graph.on('node:mouseleave', e => {
const nodeItem = e.item;
graph.setItemState(nodeItem, 'hover', false);
});
graph.on('node:click', e => {
const clickNodes = graph.findAllByState('node', 'click');
clickNodes.forEach(cn => {
graph.setItemState(cn, 'click', false);
});
const nodeItem = e.item;
graph.setItemState(nodeItem, 'click', true);
});
graph.on('edge:click', e => {
const clickEdges = graph.findAllByState('edge', 'click');
clickEdges.forEach(ce => {
graph.setItemState(ce, 'click', false);
});
const edgeItem = e.item;
graph.setItemState(edgeItem, 'click', true);
});

// 以下是重点
graph.node(node => {
if (node.flag === 'b') {
return {
style:{
fill: '#fff',
stroke: '#ea7171'
}
}
}
return {
style: {
fill: '#2db7f5',
stroke: 'green'
}
}
});
graph.data(data);
graph.render();
main();
</script>
<style>
.g6-tooltip {
color: rgb(224, 28, 28);
background-color: rgba(224, 223, 152, 0.9);
border: 1px solid #000000;
}
</style>
</body>

</html>


• 1
点赞
• 4
收藏
觉得还不错? 一键收藏
• 打赏
• 1
评论
06-25 4万+
06-22 267
05-05 971
02-02 8667
03-21 1286
04-03 8621
11-23 363
06-30 575
12-16 1106
01-02
08-01 745
08-01 420

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。