Question

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

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

然后我使用 diagram.model.removeNodeData 方法使用 goType：'tcp'删除两个项目，然后在模型中再次添加它们：

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
}]);

但在此之后，图表中的节点数量不同，我在画布上只看到两个节点：

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

如果使用方法每个查看 diagram.findNodesByExample（{}）的结果，我会看到添加了 instance2 只有：

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

我做错了什么？

Answer 1

我刚试过你的代码，但无法重现问题。这是我使用的整个页面：

<!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>

Answer 2

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

delete node.__gohashid;

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

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

2 个答案: