手机版

基于d3.js/neovis.js/neod3.js实现链接neo4j图形数据库的图像化显示功能

时间:2022-02-19 来源:互联网 编辑:宝哥软件园 浏览:

  目录

  一、使用d3.js

  二、 neo4jd3.js

  三、neovis.js

  一、基于D3.js (自由度高,写起来麻烦)

  二、基于neovis.js (基于d3库,简洁,但样式固定,自由度低。)

  三、基于neo4jd3.js (融合neovis与d3,数据格式可用d3\neo4j的,或根据需求自己重写方法) https://github.com/eisman/neo4jd3

  Svg 不推荐在HTML4和XHTML中使用(但在HTML5允许)

  一、使用d3.js

  效果:

基于d3.js/neovis.js/neod3.js实现链接neo4j图形数据库的图像化显示功能

  1.引入官方js

基于d3.js/neovis.js/neod3.js实现链接neo4j图形数据库的图像化显示功能

  定义背景/图片大小

  用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遍历次序中所有匹配的元素。】

  代码:

  

  

  

  

  

  

 

  

  

  

  

  

  

  mydata.json

  {

  "nodes": [{

  "id": "2",

  "labels": "./image/wode.png",

  "properties": {

  "person": "Person2"

  }

  }, {

  "id": "58688",

  "phone": "85266978333"

  "id": "128386",

  "username": "Samuel_lee"

  }],

  "edges": [{

  "id": "23943",

  "type": "has",

  "startNode": "2",

  "endNode": "58688",

  "properties": {},

  "source": "2",

  "tarwww.cppcns.comget": "58688"

  "id": "94198",

  "type": "registered",

  "startNode": "58688",

  "endNode": "128386",

  "source": "58688",

  "target": "128386"

  }]

  }

  二、 neo4jd3.js

  https://github.com/eisman/neo4jd3

  效果:

基于d3.js/neovis.js/neod3.js实现链接neo4j图形数据库的图像化显示功能

  与neovis.js类似,根据d3/neo4j的数据格式,将数据传入,根据需求渲染结点图像关系,但样式固定。

  可以重写js中的数据与方法。

  在这里,出现了问题:我在js中修改的方法无法被使用。

  根据排查,最后发现在代码末尾有一行注释:

基于d3.js/neovis.js/neod3.js实现链接neo4j图形数据库的图像化显示功能

  源映射是用来为压缩后的代码调试提供方便的,为了提高性能,很多站点都会先压缩 javascript 代码然后上线,

  但如果代码运行时出现错误,浏览器只会显示在已压缩的代码中的位置,很难确定真正的源码错误位置。

  要更改js记得将这行注释删除。

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

 

  

 

版权声明:基于d3.js/neovis.js/neod3.js实现链接neo4j图形数据库的图像化显示功能是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。

相关文章推荐