cytoscape.js - 如何合并来自不同来源的同一节点的属性

Question

我有一个显示一些节点及其属性的工作图。然后我得到一个包含不同数据的 JSON，其中一些节点可能已经存在于我的图表上。如何组合两个数据源，使它们在同一个图表上可见 -但具有相同ID 的节点必须组合为一个并包含来自两个数据源的属性（而不是默认情况下来自一个）？例子：Node from source 1 => "id": "1", "name": "1", "param1": 100;Node from source 2 => "id": "1", "name": "1", "param2": 200;我希望在图表上看到的是一个具有属性的节点："id": "1", "name": "1", "param1": 100, "param2": 200

Answer 1

我正在自己的应用程序中编写代码，以完全按照您的要求进行操作。下面的代码有效，但我怀疑它不是最有效的方法。因此，请不要在没有等待至少几天让更有经验的人发布更好的答案或添加批评此答案的评论的情况下接受此答案。

诀窍是查询 cy（cytoscape.js 核心对象）以查找仅包含具有给定 id 的节点的“集合对象”，然后查询集合对象以查看它是否为空。如果该节点不存在，你cy.add()它。如果节点确实存在，则调用node.data()集合对象来更新它。

function updateGraph(g) {  // g is the output from JSON.parse(), containing graph from server

  gg = g;  // save pointer to g, for console debugging

  // Import nodes from server graph

  for (const sn of g.nodes) {  // sn = node as represented on the server

    var node = cy.$id(sn.id)   // node = cytoscape.js's representation of node

    if (node.empty()) {

      node = cy.add({group: 'nodes', data: {

        id: sn.id,

        label: sn['display-name'],  // peculiar to my application

        parent: sn.memberOf         // peculiar to my application

        /* . . . and whatever other data you want to copy to the cytoscape.js graph . . . */

      }});

      node.addClass(sn.class);

    } else {

      /* Update `node` with data from `sn`.*/

      node.data( /* your overriding data goes here */ );

    }

  }

}

var gg; // We save the last graph dict from the server here so we can look at

        // it in the Chrome debugger even after updateGraph() returns.

gg当然，该变量不是必需的，但我发现它对于查看 Chrome 调试器中发生的事情是必不可少的。

在您的应用程序中，您可以Object.assign()在调用node.data(). 这将比我上面的代码更简单、更有效，其中来自源的数据具有与 cytoscape.js 预期的键不同的键。

Answer 2

     //Node from source 1 => "id": "1", "name": "1", "param1": 100;

    var xNode={"id": "1", "name": "1", "param1": 100}

    //Node from source 2 => "id": "1", "name": "1", "param2": 200;

    var  yNode={"id": "1", "name": "1", "param2": 200}

   // finalNode=Object.assign({},xNode,yNode)

   var  finalNode={...xNode,...yNode}

   console.log('merge Obj:'+JSON.stringify(finalNode))