Neo4J - ECharts力导向图

这篇具有很好参考价值的文章主要介绍了Neo4J - ECharts力导向图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🎁重点的refs:

  • Neo4J工程师 - 15 个可视化 Neo4j 图形数据库的工具(zhihu上有抄的)
  • Echarts与Neo4j可视化——记录不一样的想法

1. Neo4J创建数据

根据个人业务来,不做赘述。一般需要提前创建nodes和links两类csv
ps: 这数据库也不好写,写得不得劲儿。Neo4J有没有类似Navicat那种的可视化界面啊。

  1. 导入csv(⚠️提前手动保存在本地Neo4J的import文件夹中);
  2. 创建节点nodes;
  3. 创建连接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}`)
  }
})();

echarts neo4j,前端,neo4j,echarts,前端,javascript,知识图谱,数据可视化,信息可视化


3. 可视化工具

3.1. 知识图谱的可视化形式

知识图谱主要是以图形式实现的,而图形式在可视化领域有多种类别,重点就是关注节点和连线的排布情况。下面的参考帖子也并没有列举完所有的布局,但是写的很好!
美团 - 知识图谱布局
echarts neo4j,前端,neo4j,echarts,前端,javascript,知识图谱,数据可视化,信息可视化

3.2. 前端工具选择

  1. D3.js:太复杂了,不好写,而且近年社区没那么活跃了;现在期待Threejs、p5js之类的多多开发可视化的东东!我需要特别美观的!D3看到的所有示例都不好看。
    • ref: D3文字示例 | D3力导向图示例 | D3视频教程
  2. Neovis.js:运行成功了,但是发现不美观,而且自定义程度太低了,参考文档等于没有;
    • ref: neovis.js仓库(有advanced示例) | neovis.js视频教程
  3. 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);
}

展示

echarts neo4j,前端,neo4j,echarts,前端,javascript,知识图谱,数据可视化,信息可视化

echarts neo4j,前端,neo4j,echarts,前端,javascript,知识图谱,数据可视化,信息可视化
echarts neo4j,前端,neo4j,echarts,前端,javascript,知识图谱,数据可视化,信息可视化

还设计了海报,真的绝美(自卖自夸),等毕设结束了放上来:)文章来源地址https://www.toymoban.com/news/detail-854464.html

到了这里,关于Neo4J - ECharts力导向图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Neo4j:入门基础(二)~ 数据导入Neo4J RDF导入neo4j数据库

    neo4j导入数据的方式有以下几种: Cypher create 语句,为每一条数据写一个create Cypher load csv 语句,将数据转成CSV格式,通过LOAD CSV读取数据。 neo4j-admin import导入 官方提供的Java API - BatchInserter 大牛编写的 batch-import 工具 neo4j-apoc load.csv + apoc.load.relationship 针对实际业务场景,定制

    2023年04月24日
    浏览(74)
  • 【neo4j】neo4j的安装与使用

    https://www.oracle.com/java/technologies/downloads/ 按照步骤安装即可 配置环境变量 在系统变量中添加 path变量中添加 https://neo4j.com/deployment-center/ 下载后,在指定位置解压缩 与java相同,也需要设置环境变量。 终端输入neo4j.bat console 成功

    2024年02月03日
    浏览(59)
  • Neo4j:入门基础(二)~ 数据导入Neo4J

    neo4j导入数据的方式有以下几种: Cypher create 语句,为每一条数据写一个create Cypher load csv 语句,将数据转成CSV格式,通过LOAD CSV读取数据。 neo4j-admin import导入 官方提供的Java API - BatchInserter 大牛编写的 batch-import 工具 neo4j-apoc load.csv + apoc.load.relationship 针对实际业务场景,定制

    2024年02月09日
    浏览(58)
  • vue+neo4j(neo4j desktop安装和使用)

    官网下载安装 官方下载链接:https://neo4j.com/download/ 下载后会跳转到 Activation Key 页面,已经自动生成好密钥,复制后,粘贴到 Neo4j Deskto 的 Software Keys 输入框内即可完成激活 官方安装使用手册 https://neo4j.com/developer/neo4j-desktop/ 软件主界面,默认附带一个 Example Project ,自带一个

    2024年02月14日
    浏览(44)
  • 【neo4j忘记密码】neo4j忘记密码的处理方法

    小伙伴们大家好,我是javaPope,因为最近想要构建知识图谱,突然想起自己还安装过neo4j,当我满怀欣喜启动以后却发现,忘记密码了,呜呜呜,然后,废话不多说,怎们直接上教程: 找到neo4j.config文件,路径如下(以自己为准): D:neo4jconfneo4j.conf 将 dbms.security.auth_enable

    2024年02月11日
    浏览(47)
  • Neo4j | 保姆级教学之如何清空neo4j数据库

    要清空neo4j数据库,需要进行以下操作: 停止Neo4j服务器,关闭Neo4j的所有连接。 找到 Neo4j 数据库存储的目录,通常是 data/databases/ 。 删除该目录中的所有文件和子目录。 请注意,这将不可逆地删除数据库的所有内容,包括节点、关系和属性等数据。在执行这个操作之前,请

    2024年02月06日
    浏览(53)
  • neo4j网页无法打开,启动一会儿后自动关闭,查看neo4j status显示Neo4j is not running.

    公司停电,服务器未能幸免,发现无法访问此网站,http://0.0.0.0:7474 在此之前都还好着 发现neo4j启动后几秒自动挂掉 查看neo4j的报错日志 得到以下内容(缩减版) 错误信息 “User limit of inotify watches reached” 表明系统达到了 Linux 内核对 inotify 监控事件的限制。inotify 是 Linux 内

    2024年04月11日
    浏览(49)
  • 头歌-Neo4j 的安装部署-第1关:安装 Neo4j(超详细)

     将解压包解压后开始第二步:修改配置文件:  接着修改第75行代码,如下图:  启动 Neo4j 复制下列网址,并打开Fire Fox,输入: 一开始默认账号密码都neo4j: 随后即可修改密码,账号密码都为123456,如下图:

    2024年02月07日
    浏览(278)
  • neo4j community用neo4j.bat命令启动时遇到的困难

    1. neo4j : 无法将“neo4j”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次 用powershell和cmd运行都报错,此时是neo4j环境变量未配置成功的问题,需要多次删除并新建NEO4J_HOME才有效; 2.无法加载文件 D:n

    2024年04月15日
    浏览(51)
  • NEO4J的基本使用以及桌面版NEO4J Desktop导入CSV文件

    因为我也刚接触知识图谱,就是小白,本篇博客相当于一些入门级的Cypher语句的举例,然后具体说明一下NEO4J Desktop导入CSV文件是怎么实现的,以及他的一些基本操作,适合刚接触的小伙伴。如果大家对于NEO4J的配置有疑问的话可以参考文章NEO4J桌面版的配置和连接Pycharm_neo4

    2024年01月23日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包