链接neo4j图形数据库的图像化显示（基于d3.js/neovis.js/neod3.js）

一、基于D3.js （自由度高，写起来麻烦）
二、基于neovis.js （基于d3库，简洁，但样式固定，自由度低。）
三、基于neo4jd3.js （融合neovis与d3，数据格式可用d3\neo4j的，或根据需求自己重写方法） https://github.com/eisman/neo4jd3

Svg 不推荐在HTML4和XHTML中使用（但在HTML5允许）

一、使用d3.js
效果：
1.引入官方js

定义背景/图片大小
用svg绘制背景、节点、线条、箭头。
1.请求json 数据（处理成可用等d3格式{node:{ },relaton:{source: ,target: ,type: }）
2. d3默认按索引链接结点,要强制改为通过id链接它们（myerror: 注意 === 与 == 的不同，数据类型会导致错误）
3.构造力导向布局
力布局使用：https://github.com/d3/d3/wiki/%E5%8A%9B%E5%B8%83%E5%B1%80
D3.layout.force( )构造力导向布局，force.start( ) 启动模拟;
force.tick触发仿真第一步（如更新节点的x和y属性）;
force.drag( )交互式拖动;
4.Select元素，并操作select，据需求自定义样式属性（）。
选择器使用参考：https://github.com/d3/d3/wiki/%E9%80%89%E6%8B%A9%E5%99%A8#append
https://github.com/d3/d3/wiki/%E9%80%89%E6%8B%A9%E5%99%A8
【D3中，select 返回第一个匹配的元素，selectAll遍历次序中所有匹配的元素。】

代码：

<html>
<head><meta charset="utf-8"><title>Force</title><style>.nodetext {font-size: 12px ;font-family: SimSun;//字体fill:#000000;}.linetext {font-size: 12px ;/*font-family: SimSun;*/fill:#1f77b4;fill-opacity:0.0;}.circleImg {stroke: #ff7f0e;stroke-width: 1.5px;}</style></head><body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>var width = 900;var height = 800;var img_w = 77;var img_h = 80;var radius = 30;  //圆形半径var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);var edges = [];d3.json("my.json",function(error,root){if( error ){return console.log(error);}console.log(root);
//默认按索引链接结点,我强制改成通过id链接它们。root.edges.forEach(function (e) {var sourceNode = root.nodes.filter(function (n) {return n.id === e.source;})[0],targetNode = root.nodes.filter(function (n) {return n.id === e.target;})[0];edges.push({source: sourceNode,target: targetNode,relation: e.type})});
console.log(edges)//D3力导向布局var force = d3.layout.force().nodes(root.nodes).links(edges).size([width,height]).linkDistance(200).charge(-1500).start();var defs = svg.append("defs");var arrowMarker = defs.append("marker").attr("id","arrow").attr("markerUnits","strokeWidth")//图最前端大小.attr("markerWidth","15")//标识长宽.attr("markerHeight","15").attr("viewBox","0 0 12 12")//坐标系区域.attr("refX","17").attr("refY","6").attr("orient","auto");//方向var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";arrowMarker.append("path").attr("d",arrow_path).attr("fill","#ccc");//边var edges_line =svg.selectAll("line").data(edges).enter().append("line").attr("class","line").style("stroke","#ddd").style("linewidth",2).attr("marker-end","url(#arrow)").style("stroke-width",3);//边上的文字（人物之间的关系）var edges_text = svg.selectAll(".linetext").data(edges).enter().append("text").attr("class","linetext").text(function(d){return d.relation;}).style("fill-opacity",1.0);//不透明度// 圆形图片节点（人物头像）var nodes_img = svg.selectAll("image").data(root.nodes).enter().append("circle").attr("class", "circleImg").attr("r", radius).attr("fill", function(d, i){//创建圆形图片var defs = svg.append("defs").attr("id", "imgdefs")var catpattern = defs.append("pattern").attr("id", "catpattern" + i).attr("height", 1).attr("width", 1)catpattern.append("image").attr("x", - (img_w / 2 - radius)).attr("y", - (img_h / 2 - radius)).attr("width", img_w).attr("height", img_h).attr("xlink:href", d.labels)return "url(#catpattern" + i + ")";})// .on("mouseover",function(d,i){//     //显示连接线上的文字//     edges_text.style("fill-opacity",function(edge){//         if( parseInt(edge.source) === d || parseInt(edge.target) === d ){//             return 1.0;//         }//     });// })// .on("mouseout",function(d,i){//     //隐去连接线上的文字//     edges_text.style("fill-opacity",function(edge){//         if( edge.source === d || edge.target === d ){//             return 0.0;//         }//     });// }).call(force.drag);var text_dx = -20;var text_dy = 20;var nodes_text = svg.selectAll(".nodetext").data(root.nodes).enter().append("text").style("stroke","#ff7f0e").attr("class","nodetext").attr("dx",text_dx).attr("dy",text_dy).text(function(d){var uservalue = d.properties.username;var personvalue = d.properties.person;var phonevalue = d.properties.phone;if ( uservalue == undefined ){uservalue = "";}if(personvalue == undefined){personvalue = "";}if (phonevalue == undefined){phonevalue = "";}return uservalue + phonevalue + personvalue;});force.on("tick", function(){//限制结点的边界root.nodes.forEach(function(d,i){d.x = d.x - img_w/2 < 0     ? img_w/2 : d.x ;d.x = d.x + img_w/2 > width ? width - img_w/2 : d.x ;d.y = d.y - img_h/2 < 0      ? img_h/2 : d.y ;d.y = d.y + img_h/2 + text_dy > height ? height - img_h/2 - text_dy : d.y ;});//更新连接线的位置edges_line.attr("x1",function(d){ return d.source.x; });edges_line.attr("y1",function(d){ return d.source.y; });edges_line.attr("x2",function(d){ return d.target.x; });edges_line.attr("y2",function(d){ return d.target.y; });//更新连接线上文字的位置edges_text.attr("x",function(d){ return (d.source.x + d.target.x) / 2 ; });edges_text.attr("y",function(d){ return (d.source.y + d.target.y) / 2 ; });//更新结点图片和文字nodes_img.attr("cx",function(d){ return d.x });nodes_img.attr("cy",function(d){ return d.y });nodes_text.attr("x",function(d){ return d.x });nodes_text.attr("y",function(d){ return d.y + img_w/2; });});});</script></body>
</html>

mydata.json

{"nodes": [{"id": "2","labels": "./image/wode.png","properties": {"person": "Person2"}}, {"id": "58688","labels": "./image/wode.png","properties": {"phone": "85266978333"}}, {"id": "128386","labels": "./image/wode.png","properties": {"username": "Samuel_lee"}}],"edges": [{"id": "23943","type": "has","startNode": "2","endNode": "58688","properties": {},"source": "2","target": "58688"}, {"id": "94198","type": "registered","startNode": "58688","endNode": "128386","properties": {},"source": "58688","target": "128386"}]}

二、 neo4jd3.js
https://github.com/eisman/neo4jd3
效果：

与neovis.js类似，根据d3/neo4j的数据格式，将数据传入，根据需求渲染结点图像关系，但样式固定。
可以重写js中的数据与方法。

在这里，出现了问题：我在js中修改的方法无法被使用。
根据排查，最后发现在代码末尾有一行注释：

源映射是用来为压缩后的代码调试提供方便的，为了提高性能，很多站点都会先压缩 JavaScript 代码然后上线，
但如果代码运行时出现错误，浏览器只会显示在已压缩的代码中的位置，很难确定真正的源码错误位置。
要更改js记得将这行注释删除。

<!doctype html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="description" content=""><meta name="viewport" content="width=device-width"><title>neo4jd3.js</title><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/font-awesome.min.css"><link rel="stylesheet" href="css/neo4jd3.min.css?v=0.0.1"><script src="js/d3.min.js"></script><script src="js/2.js?v=0.0.2"></script><style>body,html,.neo4jd3 {height: 100%;overflow: hidden;}</style></head><body><div id="neo4jd33"></div><!-- Scripts --><script type="text/javascript" >function init() {var neo4jd3 = new Neo4jd3('#neo4jd33', {icons: {},images: {'person': 'img/twemoji/wode.png',},minCollision: 50,neo4jDataUrl:'./json/mydata.json',nodeRadius: 30,zoomFit: false});}window.onload = init;</script><script></script></body>
</html>

三、neovis.js

详细使用文档见：
https://www.npmjs.com/package/neovis.js
https://github.com/neo4j-contrib/neovis.js#readme
Neovis.js 需要链接 neo4j 的bolt地址，并书写cypher语句获取查询结果。
创建一个div，在其中制定οnlοad=“draw( )”，然后自己定义draw( )。
使用简单，但模板样式固定。

  function draw() {var config = {container_id: "viz",server_url:"bolt://xxxxxxxx",server_user: "",server_password: "",labels: {"person": {"caption": "person",},"phone":{"caption": "phone",},"zello":{"caption": "username",}},relationships: {"has": {"thickness": 0.003,"caption": true},"registered":{"thickness": 0.003,"caption": true}},initial_cypher: "MATCH (n) RETURN n LIMIT 25",arrows: true};viz = new NeoVis.default(config);console.log(viz);viz.render();console.log(viz);}

链接neo4j图形数据库的图像化显示（基于d3.js/neovis.js/neod3.js）相关推荐

Pytorch：图像语义分割-基于VGG19的FCN8s实现
Pytorch: 图像语义分割-基于VGG19的FCN8s语义分割网络实现 Copyright: Jingmin Wei, Pattern Recognition and Intelligent Sy ...
基于vue的组织架构树组件_Vue组件基于D3.js布局显示树
基于vue的组织架构树组件 Vue.D3.tree (Vue.D3.tree) Update documentationVue components to display graphics based ...
EDA实验课课程笔记（七）——DC(Design Compiler)的简介及其图像化使用（一）
本博文用于记录DC的基本知识及一些相关的最基本概念.然后配合演示视频,对DC有一个最初步的认识.参考学校老师的PPT讲解,以及实验指导书中的内容. Design Compiler的简介及其图像化使用 ...
Neo4j 图形数据库
目录 Neo4j 基础什么是Neo4j Neo4j 模块构建 Neo4j的主要应用场景 Neo4j 环境搭建 Docker 安装Neo4j Neo4j数据浏览器 Neo4j CQL CQL简介 Ne ...
【OpenCV 例程200篇】03. 图像的显示（cv2.imshow）
[OpenCV 例程200篇]03. 图像的显示(cv2.imshow) 欢迎关注『OpenCV 例程200篇』系列,持续更新中欢迎关注『Python小白的OpenCV学习课』系列,持续更新 ...
AI艺术的背后：详解文本生成图像模型【基于 Diffusion Model】
系列文章链接: AI艺术的背后:详解文本生成图像模型[基于 VQ-VAE] AI艺术的背后:详解文本生成图像模型[基于GAN] AI艺术的背后:详解文本生成图像模型[基于Diffusion Model ...
AI艺术的背后：详解文本生成图像模型【基于GAN】
系列文章链接: AI艺术的背后:详解文本生成图像模型[基于 VQ-VAE] AI艺术的背后:详解文本生成图像模型[基于GAN] AI艺术的背后:详解文本生成图像模型[基于Diffusion Model ...
【图像修复】基于matlab损坏图像修复【含Matlab源码 731期】
一.获取代码方式获取代码方式1: 完整代码已上传我的资源:[图像修复]基于matlab损坏图像修复[含Matlab源码 731期] 点击上面蓝色字体,直接付费下载,即可. 获取代码方式2: 付费专栏 ...
使用Python读取raw格式图像并显示
整理日期:2020-02-13 整理内容:使用Python读取raw格式图像并显示代码如下: import cv2 #OpenCV包 import numpy as np# 首先确定原图片的基本信息 ...

链接neo4j图形数据库的图像化显示（基于d3.js/neovis.js/neod3.js）

链接neo4j图形数据库的图像化显示（基于d3.js/neovis.js/neod3.js）相关推荐

最新文章

热门文章