DiagramListener 没有被调用？答案

【问题标题】：DiagramListener not being called?DiagramListener 没有被调用？
【发布时间】：2025-12-24 04:35:09
【问题描述】：

我正在尝试捕获 TreeExpanded 和 TreeCollapsed 事件，但没有调用相应的侦听器。我已经按如下方式实现了监听器：

  myDiagram.addDiagramListener("TreeExpanded", function(e) {
    console.log(">>>>> STUFF HAPPENED in TreeExpanded");

  });

  myDiagram.addDiagramListener("TreeCollapsed", function(e) {
    console.log(">>>>> STUFF HAPPENED in TreeCollapsed");
  });

myDiagram 的完整代码如下所示：

  myDiagram = $(go.Diagram, "myDiagramDiv",
    {
      "undoManager.isEnabled": true,
      layout: $(go.TreeLayout),
      "ChangedSelection": onSelectionChanged
    });

  function geoFunc(geoname) {
    var geo = icons[geoname];
    if (geo === undefined) geo = icons["heart"];  // use this for an unknown icon name
    if (typeof geo === "string") {
      geo = icons[geoname] = go.Geometry.parse(geo, true);  // fill each geometry
    }
    return geo;
  }

  myDiagram.nodeTemplate =
    $(go.Node, "Auto",
      {isTreeExpanded:false},
      {doubleClick: function(e, node) {node.expandTree(1);}},
      $(go.Shape, "Rectangle",
        { strokeWidth: 2, stroke: colors["gray"],  },
        new go.Binding("fill", "color")),
      $(go.TextBlock, {stroke:"black",font:"12pt sans-serif",margin:3,wrap: go.TextBlock.WrapDesiredSize},new go.Binding("text", "geo"))


    );

  // Define a Link template that routes orthogonally, with no arrowhead
  myDiagram.linkTemplate =
    $(go.Link,
      { routing: go.Link.Orthogonal, corner: 5, toShortLength: -2, fromShortLength: -2 },
      $(go.Shape, { strokeWidth: 2, stroke: colors["gray"] })); // the link shape


  myDiagram.addDiagramListener("TreeExpanded", function(e) {
    console.log(">>>>> STUFF HAPPENED in TreeExpanded");

  });

  myDiagram.addDiagramListener("TreeCollapsed", function(e) {
    console.log(">>>>> STUFF HAPPENED in TreeCollapsed");
  });


  // Create the model data that will be represented by Nodes and Links
  myDiagram.model = new go.GraphLinksModel(
    [

如何检测节点树何时展开或折叠，然后调用函数？

【问题讨论】：

标签： javascript gojs

【解决方案1】：

调用 Node.collapseTree 或 Node.expandTree 是一个相对低级的操作。您的 doubleClick 事件处理程序不会执行事务（但任何更改都应该），也不会引发任何事件，例如“TreeExpanded”DiagramEvent。

改为调用 CommandHandler.expandTree 或 CommandHandler.collapseTree。例如：

  {
    doubleClick: function(e, node) {
      e.diagram.commandHandler.expandTree(node); 
    }
  },

【讨论】：

我不明白。是否“e.diagram.commandHandler.expandTree();”导致节点树扩展？我只想在折叠或展开节点树时调用我自己设计的函数。我不想以编程方式手动展开或折叠节点。我的问题与响应 doubleClick 事件无关。我想知道节点何时折叠或展开然后调用函数。
只有命令会引发您尝试接收的 DiagramEvent。如果 doubleClick 事件处理程序应该折叠子树，则您需要执行事务并引发 DiagramEvent。我认为您想使用 Node.treeExpandedChanged 事件处理程序而不是 DiagramEvents.
请忽略双击事件，与此问题无关。我只想听一个 TreeCollapsed / TreeExpanded 事件（可以由任何东西触发）并在发生这种情况时调用一个函数。
尝试gojs.net/latest/api/symbols/Node.html#treeExpandedChanged 而不是 DiagramEvents。这些命令执行事务并引发事件，以及调用适当的 Node 方法并执行动画。
Node.treeExpandedChanged 事件处理程序会为每个更改状态的节点调用。 DiagramEvent 监听器在每个 CommandHandler 命令中只调用一次。