组织架构图 JS 库简介及代码示例
引言
在企业组织中，组织架构图是一种常见的图形表示方式，用于展示公司或组织的层级关系和人员结构。通过组织架构图，可以清晰地了解到不同部门之间的关系和人员的分布情况，帮助管理者做出决策和规划。为了方便开发者快速生成和展示组织架构图，现有许多 JS 库可供选择。本文将介绍一些常见的组织架构图 JS 库，并提供相应的代码示例。
1. GoJS
GoJS 是一款功能强大的 JavaScript 图表库，它提供了丰富的 API 和可定制的模板，以便开发者创建定制化的组织架构图。通过 GoJS，我们可以轻松地绘制组织架构图，并添加交互功能。
以下是一个使用 GoJS 创建组织架构图的示例代码：
// 创建 GoJS 图表实例
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true // 开启撤销重做功能
});
// 定义组织架构图节点的模板
myDiagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "RoundedRectangle",
{
fill: $(go.Brush, "Linear", { 0: "rgb(254, 201, 0)", 1: "rgb(254, 162, 0)" }),
stroke: null
}),
$(go.TextBlock,
{ margin: 8, editable: true }, // 可编辑文本
new go.Binding("text").makeTwoWay())
);
// 定义组织架构图边的模板
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.AvoidsNodes, corner: 5 },
$(go.Shape, { strokeWidth: 1.5 }),
$(go.TextBlock,
new go.Binding("text").makeTwoWay())
);
// 初始化图表数据
myDiagram.model = new go.GraphLinksModel(
[
{ key: "Alpha" },
{ key: "Beta" },
{ key: "Gamma" },
{ key: "Delta" },
{ key: "Epsilon" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Delta" },
{ from: "Gamma", to: "Epsilon" }
]
);
以上代码使用 GoJS 创建了一个组织架构图，其中使用了自定义的节点和边的模板。该示例只是 GoJS 功能的冰山一角，开发者可以通过阅读官方文档和查看示例代码了解更多功能和定制化选项。
2. D3.js
D3.js 是一个用于创建数据可视化的 JavaScript 库，因其强大的功能和灵活性而受到广泛关注。虽然 D3.js 不是专门用于绘制组织架构图的库，但通过其提供的功能，我们可以创建漂亮且交互式的组织架构图。
以下是一个使用 D3.js 创建组织架构图的示例代码：
// 创建 SVG 容器
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
// 构建数据
var nodes = [
{ id: 1, name: "Alpha" },
{ id: 2, name: "Beta" },
{ id: 3, name: "Gamma" },
{ id: 4, name: "Delta" },
{ id: 5, name: "Epsilon" }
];
var links = [
{ source: 1, target: 2 },
{ source: 1, target: 3 },
{ source: 2, target: 4 },
{ source: 3, target: 5 }
];
// 创建力导向图布局
var simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink
