ANTV G6知识图谱可视化入门案例
目录
- 源代码
- 效果展示
源代码
先放代码，有时间再来写。。。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demotitle>
head>
<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',
chuohao: '刘皇叔',
zi: '玄德',
},
{
id: 'node2',
label: '诸葛亮',
type: 'circle',
zi: '孔明',
},
{
id: 'node3',
label: '关羽',
type: 'circle',
zi: '云长',
},
{
id: 'node4',
label: '曹操',
type: 'circle',
zi: '孟德',
},
{
id: 'node5',
label: '张飞',
type: 'circle',
zi: '翼德',
},
{
id: 'node6',
label: '孙权',
type: 'circle',
zi: '文台',
},
{
id: 'node7',
label: '周瑜',
type: 'circle',
zi: '公瑾',
},
{
id: 'node8',
label: '孙尚香',
type: 'circle',
zi: '',
},
{
id: 'node9',
label: '司马懿',
type: 'circle',
zi: '仲达',
},
{
id: 'node10',
label: '司马徽',
type: 'circle',
zi: '',
},
{
id: 'node11',
label: '郭嘉',
type: 'circle',
zi: '奉孝',
},
{
id: 'node12',
label: '夏侯渊',
type: 'circle',
zi: '妙才',
},
],
edges: [
{
source: 'node1',
target: 'node2',
label: '谋士',
},
{
source: 'node1',
target: 'node3',
label: '结拜兄弟',
},
{
source: 'node1',
target: 'node4',
label: '政敌',
},
{
source: 'node1',
target: 'node5',
label: '结拜兄弟',
},
{
source: 'node1',
target: 'node6',
label: '政敌',
},
{
source: 'node6',
target: 'node7',
label: '谋士',
},
{
source: 'node6',
target: 'node8',
label: '妹妹',
},
{
source: 'node1',
target: 'node8',
label: '配偶',
},
{
source: 'node4',
target: 'node9',
label: '谋士',
},
{
source: 'node2',
target: 'node9',
label: '敌对',
},
{
source: 'node2',
target: 'node10',
label: '师傅',
},
{
source: 'node4',
target: 'node11',
label: '谋士',
},
{
source: 'node4',
target: 'node12',
label: '部下',
},
{
source: 'node3',
target: 'node5',
label: '结拜兄弟',
},
{
source: 'node10',
target: 'node9',
label: '侄儿',
},
],
};
const graph = new G6.Graph({
container: 'cxk',
width: 1800,
height: 800,
// fitView: true,
// fitViewPadding: [20, 40, 50, 20],
defaultEdge: {
type: 'cubic',
endArrow: true,
color: 'blue',
lineWidth: 12,
labelCfg:{
style:{
fontSize:20,
},
},
},
defaultNode:{
size:80,
style: {
fill: '#bae637',
stroke: '#eaff8f',
lineWidth: 5,
},
linkPoints: {
top: true,
bottom: true,
left: true,
right: true,
fill: 'skyblue',
size: 5,
},
labelCfg:{
style:{
fontSize:25,
fontFamily:'楷体',
fontWeight:1000,
},
},
},
layout: {
type: 'force',
linkDistance: 400,
preventOverlap: true,
nodeSpacing:20,
},
modes: {
default: [
{
type: 'drag-node',
},
{
type: 'zoom-canvas',
},
{
type: 'activate-relations',
},
{
type: 'tooltip',
formatText(model) {
return '姓名：' + model.label + '
字：' + model.zi;
},
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.data(data);
graph.render();
main();
script>
<style>
.g6-tooltip {
padding: 10px 6px;
color: rgb(224, 28, 28);
background-color: rgba(224, 223, 152, 0.9);
border: 1px solid #000000;
border-radius: 4px;
}
style>
body>
html>
效果展示
