D3.js 组织结构图项目教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00046/article/details/137135347

UltrastysDigitalImageProcessing是一个开源Python项目，利用OpenCV和Pillow库进行图像处理，涵盖基础操作、增强、边缘检测、特征检测和机器学习应用。适用于教育、科研和软件开发，提供易用且全面的图像处理资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

D3.js 组织结构图项目教程

d3js-orgchart D3.js Organizational chart 项目地址: https://gitcode.com/gh_mirrors/d3/d3js-orgchart

1. 项目介绍

d3js-orgchart 是一个基于 D3.js 库的开源项目，旨在帮助开发者快速创建和定制组织结构图。该项目提供了两种布局：现代风格和经典风格，适用于各种项目需求。d3js-orgchart 的代码托管在 GitHub 上，采用 MIT 许可证，允许自由使用和修改。

2. 项目快速启动

2.1 安装

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令将项目克隆到本地：

git clone https://github.com/BernhardZuba/d3js-orgchart.git
cd d3js-orgchart

2.2 运行示例

项目中包含一个简单的示例，你可以通过以下步骤运行：

打开 index.htm 文件。
在浏览器中打开该文件，即可看到组织结构图的示例。

2.3 自定义数据

你可以通过修改 createDummyData.sql 文件中的数据来生成自定义的组织结构图。以下是一个简单的示例代码：

-- createDummyData.sql
INSERT INTO positions (id, name, parent_id) VALUES
(1, 'CEO', NULL),
(2, 'CTO', 1),
(3, 'CFO', 1),
(4, 'Developer', 2),
(5, 'Designer', 2),
(6, 'Accountant', 3);

2.4 渲染组织结构图

在 index.htm 文件中，你可以通过以下代码渲染组织结构图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3.js Org Chart</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="getPositions.php"></script>
</head>
<body>
    <div id="chart"></div>
    <script>
        // 获取数据
        d3.json('getPositions.php').then(data => {
            // 渲染组织结构图
            const chart = d3.orgChart()
                .container('#chart')
                .data(data)
                .svgWidth(700)
                .initialZoom(0.4)
                .onNodeClick(d => console.log(d + ' node clicked'))
                .render();
        });
    </script>
</body>
</html>