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

作者：weixin_40725706 | 2024-06-16 17:50:27

踩

neo4j显示图片

一、基于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(f
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/727620