🎁重点的refs:
- Neo4J工程师 - 15 个可视化 Neo4j 图形数据库的工具(zhihu上有抄的)
- Echarts与Neo4j可视化——记录不一样的想法
1. Neo4J创建数据
根据个人业务来,不做赘述。一般需要提前创建nodes和links两类csv
ps: 这数据库也不好写,写得不得劲儿。Neo4J有没有类似Navicat那种的可视化界面啊。
- 导入csv(⚠️提前手动保存在本地Neo4J的import文件夹中);
- 创建节点nodes;
- 创建连接links。
2. 前端连接Neo4J
- refs: neo4j-driver指南 | npm: neo4j-driver
index.html
<!doctype html>
<html>
<head>
<title>Neovis.js Simple Example</title>
</head>
<!-- 顺序别反了 -->
<script src="https://unpkg.com/neo4j-driver"></script>
<script type="text/javascript" src="prepare_neo4j.js"></script>
</html>
prepare_neo4j.js
(async () => {
// URI examples: 'neo4j://localhost', 'neo4j+s://xxx.databases.neo4j.io'
const URI = 'bolt://localhost:7687';
const USER = 'neo4j';
const PASSWORD = '12345678';
let driver
try {
driver = neo4j.driver(URI, neo4j.auth.basic(USER, PASSWORD))
const serverInfo = await driver.getServerInfo()
console.log('Connection established')
console.log(serverInfo)
} catch(err) {
console.log(`Connection error\n${err}\nCause: ${err.cause}`)
}
})();
3. 可视化工具
3.1. 知识图谱的可视化形式
知识图谱主要是以图形式实现的,而图形式在可视化领域有多种类别,重点就是关注节点和连线的排布情况。下面的参考帖子也并没有列举完所有的布局,但是写的很好!
美团 - 知识图谱布局
3.2. 前端工具选择
- D3.js:太复杂了,不好写,而且近年社区没那么活跃了;现在期待Threejs、p5js之类的多多开发可视化的东东!我需要特别美观的!D3看到的所有示例都不好看。
- ref: D3文字示例 | D3力导向图示例 | D3视频教程
- Neovis.js:运行成功了,但是发现不美观,而且自定义程度太低了,参考文档等于没有;
- ref: neovis.js仓库(有advanced示例) | neovis.js视频教程
- ECharts:还得是ECharts,不仅开箱就美观,定制程度也高。
- ref: 快速上手 | EChats力导向图案例
- 可以根据示例数据,去调整csv和Neo4J
3.3. ECharts实现力导向图
- ECharts主要是通过option来美化图表
- 参考-力导向图的option参数(好像新版本变了一些)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#main {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="main"></div>
</body>
<script src="echarts.js"></script>
<!-- browser项目声明 -->
<script src="https://unpkg.com/neo4j-driver"></script>
<script src="prepare_neo4j.js"></script>
</html>
prepare_neo4j.js
(async () => {
const URI = 'bolt://localhost:7687';
const USER = 'neo4j';
const PASSWORD = '12345678';
let driver;
try {
driver = neo4j.driver(URI, neo4j.auth.basic(USER, PASSWORD));
const serverInfo = await driver.getServerInfo();
console.log('Connection established');
console.log(serverInfo);
const session = await driver.session();
// !!! 这句CYPHER尽量保持这种path=(node_source)-[relationship]->(node_target)形式,不然后面代码会一直改来改去!!!
const result = await session.run(
'MATCH path=(i:Ingredient)-[r:HAS_BENEFIT]->(b)\nRETURN path'
);
// 打印 Neo4j 返回的数据
console.log(result.records.map((record) => record.get('path')));
// 将 Neo4J 数据转换为 ECharts 所需的格式
function convertNeo4jDataToEchartsData(paths) {
const nodes = new Map();
const links = [];
const categories = new Set();
paths.forEach((path) => {
path.segments.forEach(({ start, end, relationship }) => {
// 添加起始节点
addNode(nodes, categories, start);
// 添加结束节点
addNode(nodes, categories, end);
// 添加关系
addRelationship(links, nodes, relationship);
});
});
return {
nodes: Array.from(nodes.values()),
links,
categories: Array.from(categories),
};
}
function addNode(nodes, categories, node) {
const category = node.labels[0];
categories.add(category);
const nodeName = `${node.properties.id}`;
nodes.set(node.identity.low, {
id: node.identity.low,
name: nodeName,
category,
...node.properties,
});
}
// 我这里为了后面连线颜色,互换了source和target的
// source原本应该是start,target是end
function addRelationship(links, nodes, relationship) {
links.push({
source: nodes.get(relationship.end.low).id,
target: nodes.get(relationship.start.low).id,
label: relationship.type,
properties: relationship.properties,
});
}
// 获取 ECharts 需要的数据并显示
const { nodes, links, categories } = convertNeo4jDataToEchartsData(result.records.map((record) => record.get('path')));
displayEchartsGraph(nodes, links, categories);
// 关闭连接
await session.close();
await driver.close();
} catch (err) {
console.log(`Connection error\n${err}\nCause: ${err.cause}`);
}
})();
function displayEchartsGraph(nodes, links, categories) {
const myChart = echarts.init(document.getElementById('main'));
console.log("Nodes:", nodes);
console.log("Links:", links);
console.log("Categories:", categories);
const categoryColors = {
"category1": "#BFC4C4",
"category2": "#91cc75",
"category3": "#fac858"
};
const option = {
backgroundColor: '#000000',
tooltip: {
trigger: 'item',
formatter: (params) => {
if (params.dataType === 'node') {
return `${params.data.name}<br>${params.data.description}`;
} else {
return `${params.data.source} --[${params.data.label}]--> ${params.data.target}`;
}
}
},
legend: [
{
data: categories,
orient: 'vertical',
left: 'left',
top: 'center',
textStyle: { color: '#fff' }
}
],
series: [
{
type: 'graph',
layout: 'force',
data: nodes,
links: links,
categories: Object.keys(categoryColors).map((name) => ({
name: name,
itemStyle: {
color: categoryColors[name],
},
})),
roam: true,
// label: {
// show: true,
// position: 'inside'
// },
lineStyle: {
color: 'source',
curveness: 0.3,
width: 7
},
nodeScaleRatio: 0.6,
force: {
repulsion: 108,
gravity: 0.1,
edgeLength: [0, 7]
},
visualMap: {
min: 0.2,
max: 2,
precision: 2,
calculable: true,
realtime: true,
orient: 'horizontal',
left: 'center',
top: 'top',
color: ['#800026', '#ffffcc']
},
scaleLimit: {
min: 0.1,
max: 0.26
},
animation: {
duration: 50000, // 设置动画持续时间为5秒
loop: true // 循环播放动画
},
}
]
};
myChart.setOption(option);
}
展示
文章来源:https://www.toymoban.com/news/detail-854464.html
还设计了海报,真的绝美(自卖自夸),等毕设结束了放上来:)文章来源地址https://www.toymoban.com/news/detail-854464.html
到了这里,关于Neo4J - ECharts力导向图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!