gojs实现组织架构图并为每个节点绑定点击事件

GoJS是一个强大的JavaScript库，用于创建交互式的图表和 diagrams。要使用GoJS实现组织架构图并为每个节点绑定点击事件，你可以按照以下步骤操作：

1. **引入GoJS库**:
首先，你需要在HTML文件中引入GoJS的脚本资源，通常通过CDN链接或者本地服务器路径。

<script src="https://gojs.net/latest/intro/v6.min.js" type="text/javascript"></script>

2. **初始化画布**:
创建一个新的`GoBoard`实例，设置容器ID和布局算法等属性。

var $ = go.GraphObject.make; // 简化语法
var myDiagram = new go.Diagram("chartContainer", // 容器ID
{
  initialContentAlignment: go.Spot.Center,
  layout: $(go.TreeLayout),
});

3. **构建模型数据**:
设计你的组织架构数据结构，比如`Node`和`Edge`模型，包含id、标签、层级信息等。

var nodeDataArray = [
  { id: "A", text: "部门A", level: 0 },
  { id: "B", text: "部门B", parent: "A", level: 1 },
  // 更多节点...
];

4. **创建节点和边**:
使用`myDiagram.addNode()`和`myDiagram.addEdge()`方法将数据添加到图形中。

5. **绑定节点点击事件**:
对每个节点应用点击事件处理函数，例如：

nodeDataArray.forEach(node => {
  var nodeObj = myDiagram.addNode(node.id, node.text);
  nodeObj.click += function(e) {
    console.log("节点 ", node.id, " 被点击了");
    // 这里可以进一步执行你想对点击节点的操作
  };
});

6. **显示图表**:
最后，调用`myDiagram.layout()`开始布局，并更新视图。

myDiagram.layout();
myDiagram.render(); // 更新图形