Question

我正在使用 Sigma.js 库在 Neo4j 图表数据库之上创建一个webapp。

所以，我的图表包含节点和边缘，我想用javascript双击事件来扩展节点。

你能帮我这么做吗？

非常感谢

sigma.neo4j.cypher(
    {url :'http://localhost:7474', user: 'neo4j', password: 'neo4j'},
    'MATCH (n)-[r]->(m) RETURN n,r,m LIMIT 100' ,
    {container:'graph-container'},


    function (s) {
        s.graph.nodes().forEach(function (node){


            if (node.neo4j_labels[0] === "Movies"){
            node.label = node.neo4j_data['movie'];
            node.color = '#68BDF6';
            node.size = 26;
            node.type = "star";
          }

            else if (node.neo4j_labels[0] === "Personn"){
            node.label = node.neo4j_data['personn'];
            node.type = "diamond";
            node.color = '#303A2B';
            node.size = 12;
          }


            console.log(s.graph.nodes());
            s.settings('touchEnabled', true);
            s.settings('mouseEnabled', true);
            s.settings('defaultEdgeLabelSize', 18);
            s.settings('defaultNodeLabelSize', 18);
            s.settings('animationsTime', 1000);





        s.graph.edges().forEach(function(e) {
                    //e.type = 'curvedArrow';
                    //e.color='#F00';
                e.originalColor = e.color;
                e.type = "curvedArrow";
                e.size=2;


                    // e.label = neo4j_type;
                //console.log(s.graph.edges())
            });

            s.refresh();


   });

Answer 1

您必须像这样绑定sigma事件doubleClickNode：

s.bind("doubleClickNode", function(e) {
    var node = e.data.node;
    var query = 'MATCH (n)-[r]-(m) WHERE id(n)=' + node.id+ ' RETURN n,r,m';
    sigma.neo4j.cypher(
      neo4jConfig,
      query,
      function(graph) {
        // adding node if not existing
        graph.nodes.forEach(function (node){
            if(s.graph.nodes(node.id) === undefined) {
            s.graph.addNode(node);
          }
        });
        // adding edge if not existing
        graph.edges.forEach(function (edge){
            if(s.graph.edges(edge.id) === undefined) {
            s.graph.addEdge(edge);
          }
        });

       // apply style
        applyStyle(s);
      }
    );

  });

我的完整示例可在此处找到：https://jsfiddle.net/sim51/qkc0g58o/34/

在使用之前，您需要接受Neo4j SSL证书，方法是打开此链接https://localhost:7473/browser并添加安全例外

如何使用Sigmajs和Neo4j数据库扩展节点（双击鼠标事件）？

1 个答案: