@[TOC]( D3.js 树图tree 组织机构分布图(基于vue)) 前段时间接到一个需求，仿照企业查查->企业族谱 使用 d3 画出企业关系树图。这也是本人第一次接触 d3.js ，总体来说就是对数据进行操作，具体可自行网上学习，还需要具有一定 svg 基础。 开发 中 遇到的主要问题就是对各节点位置的设置，因为根节点是左右进行扩散，那针对左右两部分的根就要根据根节点所占长度进行调整，具体实现可见代码： 还有一点需要说明下， d3.js 的各版本并非全面向下兼容，之前网上找的一些案例，本地运行时一直报各种错误，排

SVG （Scalable Vector Graphics，可缩放矢量图形）是基于XML、用于描述二维矢量图形的一种图形格式。 SVG 由W3C制定，是一个开放标准。 SVG .js 中 包含了大量用于定义动画的方法，如移动、缩放、旋转、倾斜等，具体可参阅相关演示。 SVG .js 中 的一些亮点： 易读的简洁的语法 非常轻量，gzip压缩版只有5k 针对大小、位置、颜色等的动画元素 模块化结构，轻松扩展 各种实用插件 各种形状类型间拥有统一的API. 元素可以绑定事件，包括触摸事件 完全支持不透明蒙版 完整的文档记录

d3.js 是一个用于数据可视化的JavaScript库，它提供了丰富的功能和工具来创建交互式和动态的数据可视化图表。其 中 ， svg 的path标签在 d3.js 中 被称为"可以组成任何形状的形状"。 d3.js 提供了多种path生成器，可以用来创建不同类型的路径。 以下是一些常用的 d3.js svg path生成器： 1. d3 . svg .line() - 线path生成器 2. d3 . svg .line.radial() - 径向path生成器 3. d3 . svg .area() - 区域path生成器 4. d3 . svg .area.radial() - 径向区域path生成器 5. d3 . svg .arc() - 圆与圆弧path生成器 6. d3 . svg .symbol() - 符号path生成器 7. d3 . svg .chord() - chord path生成器 8. d3 . svg .diagonal() - diagonal path生成器 9. d3 . svg .diagonal.radial() - diagonal radial path生成器 这些生成器可以通过调用相应的方法来生成路径，并且还可以使用其他方法来改变其属性。此外，这些生成器还支持链式调用，可以方便地进行多个操作。 ```javascript // 创建一个 svg 元素 var svg = d3 .select("body") .append(" svg ") .attr("width", 500) .attr("height", 500); // 创建一个线path生成器 var lineGenerator = d3 . svg .line(); // 创建一个路径并设置其属性 var path = svg .append("path") .attr("d", lineGenerator([[0, 0], [100, 100], [200, 50]])) .attr("stroke", "black") .attr("fill", "none"); // 创建一个圆与圆弧path生成器 var arcGenerator = d3 . svg .arc() .innerRadius(50) .outerRadius(100) .startAngle(0) .endAngle(Math.PI); // 创建一个路径并设置其属性 var path = svg .append("path") .attr("d", arcGenerator()) .attr("transform", "translate(250, 250)") .attr("fill", "red");