重点的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
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
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}
${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);
}
展示
还设计了海报，真的绝美（自卖自夸），等毕设结束了放上来：）
推荐文章
您阅读本篇文章共花了：
发表评论