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

本文链接：https://blog.csdn.net/weixin_42656706/article/details/105201658

本文介绍了如何使用d3.js、neovis.js和neo4jd3.js来链接并可视化neo4j图形数据库。分别阐述了每个库的特点和使用方法，包括数据处理、力导向布局的构建以及样式自定义。在neovis.js中遇到的问题是方法无法被调用，原因是源映射注释未删除，影响了代码执行。最后提到了neovis.js需要链接neo4j的bolt地址并编写cypher查询语句。

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

一、基于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) {