为什么在 GoJS 中 diagram.model.nodeDataArray 的长度与 diagram.findNodesByExample({}) 的结果不同

Why in GoJS the length of diagram.model.nodeDataArray differs from the result of diagram.findNodesByExample({})

在第一次加载图表时,我在模型中添加了三个元素:

var model = new go.GraphLinksModel();
model.nodeKeyProperty = 'goKey';
model.nodeCategoryProperty = 'goType';
model.addNodeDataCollection([
  {
      goKey: 'instance1',
      goType: 'component',
      //other data
  }, {
      goKey: 'instance2',
      goType: 'tcp',
      //other data
  }, {
      goKey: 'instance3',
      goType: 'tcp',
      //other data
  }]);
diagram.model = model;
console.log(diagram.findNodesByExample({}).count); //3
console.log(diagram.model.nodeDataArray.length); //3 

然后我使用 goType: 'tcp' 使用 diagram.model.removeNodeData 方法删除了两个项目,然后再次将它们添加到型号:

var item2 = _.find(diagram.model.nodeDataArray, {goKey: 'instance2'});
var item3 = _.find(diagram.model.nodeDataArray, {goKey: 'instance3'});
model.removeNodeData(item2);
model.removeNodeData(item3);
console.log(diagram.model.nodeDataArray.length); //1
console.log(diagram.findNodesByExample({}).count); //1

diagram.model.addNodeDataCollection([{
     goKey: 'instance2',
     goType: 'tcp',
     //other data
  }, {
     goKey: 'instance3',
     goType: 'tcp',
     //other data
}]);

但在此之后图中的节点数量不同,我在 canvas 上只看到两个节点:

console.log(diagram.model.nodeDataArray.length); //3
console.log(diagram.findNodesByExample({}).count); //2

如果使用方法 each 查看 diagram.findNodesByExample({}) 的结果,我发现instance2 仅添加:

diagram.findNodesByExample({}).each(function (item) {
   console.log(item.data.goKey);
});
// instance1
// instance2

我做错了什么?

我刚刚尝试了您的代码,但无法重现问题。这是我使用的整个页面:

<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.28/go-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    diagram =
      $(go.Diagram, "myDiagramDiv",
        {
          initialContentAlignment: go.Spot.Center,
          layout: $(go.GridLayout)
        });

    diagram.nodeTemplate =
      $(go.Node, "Vertical",
        $(go.TextBlock, new go.Binding("text", "goKey")),
        $(go.TextBlock, new go.Binding("text", "goType"))
      );

    var model = new go.GraphLinksModel();
    model.nodeKeyProperty = 'goKey';
    model.nodeCategoryProperty = 'goType';
    model.addNodeDataCollection([
      {
        goKey: 'instance1',
        goType: 'component',
        //other data
      }, {
        goKey: 'instance2',
        goType: 'tcp',
        //other data
      }, {
        goKey: 'instance3',
        goType: 'tcp',
        //other data
      }]);
    diagram.model = model;
    console.log(diagram.findNodesByExample({}).count); //3
    console.log(diagram.model.nodeDataArray.length); //3 
  }

  function replaceTwo() {
    var model = diagram.model;
    model.startTransaction();
    var item2 = _.find(model.nodeDataArray, { goKey: 'instance2' });
    var item3 = _.find(model.nodeDataArray, { goKey: 'instance3' });
    model.removeNodeData(item2);
    model.removeNodeData(item3);
    console.log(model.nodeDataArray.length); //1
    console.log(diagram.findNodesByExample({}).count); //1

    model.addNodeDataCollection([{
      goKey: 'instance2',
      goType: 'tcp',
      //other data
    }, {
      goKey: 'instance3',
      goType: 'tcp',
      //other data
      }]);
    model.commitTransaction("replace two");

    console.log(diagram.model.nodeDataArray.length); //3
    console.log(diagram.findNodesByExample({}).count); //2??? -- No, I get 3
    diagram.findNodesByExample({}).each(function(item) {
      console.log(item.data.goKey);
    });
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <button onclick="replaceTwo()">Replace Two</button>
</body>
</html>

问题终于找到了。从模型中删除节点后(我将它们保存在副本中),我再次添加它们,所以如果看一下这些节点,我们会看到一个额外的 属性 __gohashid 在再次将其添加到模型之前应将其删除。我不知道它是如何工作的,但是这串代码

delete node.__gohashid;

解决了上述问题。希望它对某人有用。