起因 最近公司想做一个组织架构的拓扑图，要有拖拽，展开收起节点，员工在一条直线上展开提高空间利用率的图形结构 技术了解 刚开始我了解了vue3-tree-org，和OrgChart这两个插件 vue3

d3-selection 前言 D3.js 用了一种与 jQuery 一样的 链式语法，这样通过 . 就把多个操作链接起来，执行逻辑上更加清晰。涵盖了d3 的各种方法

1. Three.js Three.js 是一款基于 WebGL 的强大 JavaScript 库，用于在 Web 浏览器中创建和呈现三维图形。它提供了基础的 3D 渲染功能，包括几何体创建、材质和光

在日常开发中，涉及到可视化图形时，最常用到的是 ECharts 和 G2 等库，它们因其易用性和丰富的功能而广受欢迎。然而，除了这两者外，还有一些其他优秀的图形库值得关注。

本文正在参加「金石计划 . 瓜分6万现金大奖」 引入D3模块 引入整个D3模块。 数据 关于排名的数据，量都比较大。这里使用.csv文件保存。开发中一般通过接口获取。 本地是不支持直接获取外部数据，我

学习D3的前提，了解SVG的基础知识，熟悉常见图形的绘制，了解ViewBox的原理，为更好的学习D3前进。

选择器 d3选择器和jquery类似，可以通过类名(class)、id、标签、属性等进行查找并返回selection

DataJoin(数据连接)是D3中很重要的一个概念。上一章有提到D3是基于数据操作DOM的js库，DataJoin使我们能够根据现有 HTML 文档中的数据集注入、修改和删除元素。

中国这么大，要在一张小小地图上画上中国，那么就需要按一定的比例缩小。D3 可视化画图，也是如此，例如：一个柱状图的最大值为10000，但是画布最大高度只有400，那么10000就只能被映射为400，那