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

代码：

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记得将这行注释删除。

三、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);
        }