鉴于网上旧版的股权穿透图长得太丑了，我决定基于最新版的d3.js（v7）重构一版。使用方式更简单，并且增加了“全部展开”和“全部收缩”的功能

先看成果 场景 组织结构图、文件图等。 canvas 基础 多的不介绍，只介绍这次用到的一些API，详细的API就点这里看看。 moveTo 移动canvas画笔的点到指定坐标，可以理解为笔从纸上拿起

由于公司需求，所以需要做数据可视化。看了很多库，觉的D3.js库很强大，于是决定用D3.js库。 在使用树状图时，看到固定的树形图，在想能不能做了思维导图了，于是便开始了探索。。。

d3相关api 本文为一个最简单的树形结构过渡效果展开的核心功能，没有添加连接线等逻辑 hierarchy hierarchy接收一个树形结构的对象，d3会根据这个树形结构生成一个新的树形结构，这个新

树图是很常用的图表，它有结点和子节点的结构。如果一个结点的子节点太多，我们通常会把它们先隐藏起来，在点击父节点的时候展开显示。为了美观和流畅，我们可以加上展开收起的动画。

偶然在掘金上看见 @大搜车无线开发中心 的一篇关于《使用 d3.js 力导布局绘制资源拓扑图》的文章，想起实习僧的时候做过类似的关系拓扑图，斗胆放到掘金上哈哈哈。GitHub地址

之前有小伙伴问我如何使用 D3 在前端绘制流程图，今天在这里给安排上，与大家分享。 明确一点，只要你的数据计算能力足够强，使用原生D3绘制流程图绝对可以的，但是，为了让大家更容易上手，避免重复造轮子，给大家推荐一个专门绘制流程图的 D3 插件 dagre-d3。 首先认识下 d…

如果你想用 canvas 画图，那不妨试试 Fabric.js 。跟着本文一步一步操作，一定可以入门 Fabric.js

如果急用, 可先cv走代码修改, 哪里没明白再回来看哪里. d3 是一个大而全的图形库, 集成了svg 元素操作和常见图表(图形)的数据结构. 本文基于v5 版本的 d3 编写, d3 的功能都是拆分成独立包的, 我们这里只需要引入d3-hierarch和d3-shape生成拓…