漫威电影人物关系可视化

吖嗡嗡

已于 2023-04-03 16:33:23 修改

阅读量442

点赞数

文章标签：知识图谱 json javascript

于 2023-04-03 16:30:26 首次发布

本文链接： https://blog.csdn.net/TooTL/article/details/129932234

版权

文章介绍了如何利用ThreeJS和WebGL的3Dforce-directedgraph组件创建一个三维知识图谱，特别是漫威电影宇宙的人物关系图。通过数据预处理、设置天空盒以及调整线条样式，实现了动态的可视化效果。数据来源包括csv文件和Neo4j数据库。

摘要由CSDN通过智能技术生成

3D Force-Directed Graph

这是一个使用ThreeJS/WebGL的三维力定向图形组件。

github地址：vasturiano/3d-force-graph: 3D force-directed graph component using ThreeJS/WebGL (github.com)里面有许多展示的示例和相应的源码供参考。

一个3D的知识图谱

官网地址：漫威电影宇宙 |海峡时报 (straitstimes.com) （魔法）

这篇文章介绍如何使用这个组件来实现相似的效果。

天空盒

需要注意的小细节是：用于做天空盒的图片需要1：1是个正方形，不然无法显示。

var urls = [            
		'cube-image/marvel_right1.png',
		'cube-image/marvel_left2.png',
		'cube-image/marvel_top3.png',
		'cube-image/marvel_bottom4.png',
		'cube-image/marvel_front5.png',
		'cube-image/marvel_back6.png'
	];

 const Graph = ForceGraph3D()
      (document.getElementById('3d-graph'))
        .jsonUrl('../datasets/miserables.json')
        .nodeLabel('id')
        .nodeAutoColorBy('group');


var cubeLoader = new THREE.CubeTextureLoader();
Graph.scene().background = cubeLoader.load(urls);   //天空盒,添加为scene中的背景

其中的图片素材来源于官网

数据预处理

const imgs = ['tonys.svg', 'rhody.svg', 'hawke.svg', 'stever.svg', 'falcon.svg', 'nickf.svg', 'blackw.svg', 'bruceb.svg', 'vision.svg', 'wandam.svg', 'pietrom.svg', 'ultronu.svg', 'wolfgangv.svg', 'helenc.svg', ...];   //这里将人物的名字加上.svg后的字符存入列表，简单直接

        const GROUPS = 12;
        const relation_types = {friend:1,enemy:2,work:3,love:4,creation:5,family:6}   
        
        const gData = {
          nodes: imgs.map((img, id) => ({ id, img ,relation: relation_types[data['links'][id]['relation']]})),   //不同的关系有不同的颜色

          links: [...Array(data['links'].length).keys()]
            .filter(id => id)
            .map(id => ({
              source: data['links'][id]['source'],
              target: data['links'][id]['target'],
            }))
        };

csv数据获取： Python + Neo4j（安装）可视化分析漫威十年人物关系图谱_LL Leung的博客-CSDN博客

对csv文件进行了处理。