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

一、基于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张图片

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

代码:



    
    Force
    






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",
          "target": "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图形数据库的图像化显示功能_第2张图片

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

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

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



    
        
        
        
        
        neo4jd3.js
        
        
        
        
        
        
    
    
        

你可能感兴趣的:(基于d3.js/neovis.js/neod3.js实现链接neo4j图形数据库的图像化显示功能)