Neovis.js图形可视化未呈现

时间:2019-08-27 01:24:38

标签: javascript neo4j cypher

我是Neo4j的新手,也是Neovis.js的新手。但是,关于Neovis.js的文档编写方式很少,因此我在加载自己的图形时遇到了问题。对于某些信息,示例图可以很好地加载,因此在我自己的修改后的代码中似乎出现了一些错误。我只希望它将Neo4j Graph转换为嵌入其他程序时更易于查看的内容:

<!doctype html>
<html>
    <head>
        <title>Neovis.js Simple Example</title>
        <script src="https://rawgit.com/neo4j-contrib/neovis.js/master/dist/neovis.js"></script>
        <script type="text/javascript">

            var viz;

            function draw() {
                var config = {
                    container_id: "viz",
                    server_url: "bolt://localhost:7687",
                    server_user: "neo4j",
                    server_password: "redacted",
                    labels: {
                        "Instruction": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        },
                        "Fallthrough": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        },
                        "JmpRel": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        },
                        "Call": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        },
                        "Return": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        },
                        ".plt": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        },
                        "addr_600ff0": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        },
                        "Jmp": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        },
                        "Alignment": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        },
                        ".text": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        },
                        "CallRel": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        },
                        "addr_400635": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        },
                        "addr_400695": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        },
                        "addr_400730": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        },
                        ".fini": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        },
                        ".init_array": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        },
                        ".fini_array": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        },
                        ".got": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        },
                        ".got.plt": {
                            "address": "address",
                            "mnemonic": "mnemonic",
                            "groups":  "groups",
                            "registers_read": "registers_read",
                            "size": "size"
                        }
                    },
                    relationships: {
                        "TAKEN": {
                            "caption": false
                        },
                        "NOT_TAKEN": {
                            "caption": false
                        },
                        "NEXT": {
                            "caption": false
                        }
                    },
                    initial_cypher: "MATCH (n)-[r:TAKEN]->(m) RETURN *"
                };

                viz = new NeoVis.default(config);
                viz.render();
            }
        </script>
        <style type="text/css">
            html, body {
                font: 16pt arial;
            }

            #viz {
                width: 900px;
                height: 700px;
                border: 1px solid lightgray;
                font: 22pt arial;
            }
        </style>
    </head>
    <body onload="draw()">
        <div id="viz"></div>
    </body>    
</html>

这是html,每个属性都显示在Neo4j Graphing浏览器的标题中:

Neo4j Graph

我应该注意,我不是Neo4j使用的数据库的原始创建者。上图中的项目是节点的属性,对吗?我是否从javascript代码中正确引用了它们?

下图显示了数据库中存在的所有节点和关系:

Nodes & Relationships

因此,总而言之:Neovis.js的文档很少,我无法确定自己的代码的哪一部分是罪魁祸首。我敢肯定这很简单,但我自己看不到。任何对Neovis.js有所了解的人都会非常有帮助。

0 个答案:

没有答案