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

我有一个工作图，其中显示了一些节点及其属性。然后我得到一个包含不同数据的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

---

在我自己的应用程序中，我正在编写代码来完成你要做的事情。下面的代码可以工作，尽管我怀疑这不是最有效的方法。因此，请不要接受这个答案，除非至少等待几天，让更有经验的人发布一个更好的答案或添加批评这个答案的评论

诀窍是

cy

（cytoscape.js核心对象）查找只包含具有给定id的节点的“”，然后查询collection对象以查看它是否正确。如果节点不存在，则可以删除它。如果节点确实存在，则调用集合对象来更新它

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调试器中发生的事情是必不可少的

在应用程序中，您可能可以在调用

node.data（）

之前调用合并数据。这将比我上面的代码更简单、更高效，其中来自源代码的数据具有不同于cytoscape.js所期望的键。

//源节点1=>“id”：“1”，“name”：“1”，“param1”：100；
var xNode={“id”：“1”，“name”：“1”，“param1”：100}
//来自源2的节点=>“id”：“1”，“名称”：“1”，“参数2”：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））