删除节点数据时如何在 GoJS 中设置删除动画？

Question

我正在尝试制作图表中节点删除的动画

我正在使用 GoJS 文档中的这段代码： https://gojs.net/latest/intro/animation.html

myDiagram.addDiagramListener('SelectionDeleting', function(e) {
  // the DiagramEvent.subject is the collection of Parts about to be deleted
  e.subject.each(function(part) {
    if (!(part instanceof go.Node)) return; // only animate Nodes
    var animation = new go.Animation();
    var deletePart = part.copy();
    animation.add(deletePart, "scale", deletePart.scale, 0.01);
    animation.add(deletePart, "angle", deletePart.angle, 360);
    animation.addTemporaryPart(deletePart, myDiagram);
    animation.start();
  });
});

要删除我正在使用的节点 myDiagram.model.removeNodeData(node)，但这不会触发事件。如果我使用 Del 键手动删除节点，它会起作用。

如何在使用代码删除节点时触发事件，例如使用myDiagram.model.removeNodeData(node)？

Answer 1

你说得对，myDiagram.model.removeNodeData(node) 不会调用该事件。所以你需要调用myDiagram.model.removeNodeData(node)的代码来调用与事件相同的代码。

所以把代码拿出来放到自己的函数中，更一般的用途：

function animateDeletion(part) {
  if (!(part instanceof go.Node)) return; // only animate Nodes
  var animation = new go.Animation();
  var deletePart = part.copy();
  animation.add(deletePart, "scale", deletePart.scale, 0.01);
  animation.add(deletePart, "angle", deletePart.angle, 360);
  animation.addTemporaryPart(deletePart, myDiagram);
  animation.start();
}

myDiagram.addDiagramListener('SelectionDeleting', function(e) {
  // the DiagramEvent.subject is the collection of Parts about to be deleted
  e.subject.each(function(part) {
    animateDeletion(part);
  });
});

然后您可以在调用 removeNodeData 之前调用相同的代码：

  // ... elsewhere...
  animateDeletion(node);
  myDiagram.model.removeNodeData(node.data);

删除节点数据时如何在 GoJS 中设置删除动画？

How to animate a deletion in GoJS when removing node data?

javascript

gojs