1、什么是D3：

         data-driven-document,翻译为数据驱动的文档，是一种由数据来决定绘图流程的程序设计模型。简单说，D3是一个JavaScript的函数库，用来做数据可视化(将数据的各种属性和变量以图形图表的形式呈现出来)。

2、D3的优点：

         前端可视化库：Hightcharts(付费)、Echarts、Chart等可以看做一类(是被封装好的库)，使开发者很容易的就能制作图表(只需修改一下数据即可)，但是能够给与开发者设计和控制的空间太少(个人可定制性不强，对官方平台的依赖性太强)。

         封装层次太高会导致定制型不强，封装层次太低，又会是程序代码冗长，而D3在封装层次上就做到了相对的平衡，特点如下：

              1.D3相对比较底层，代码却足够简洁。

              2.D3更像数学库，为绘图提供了支持。

              3.封装了很多操作，但又给予开发者足够控制图表的自由，提高图表的定制性。   

3、D3的学习方法：

         D3是一个JavaScript库，API开发多也很完善，demo实例也很多，所以只需要开发者，会查看API文档即可，不需要记住。 把d3.js 当成jQuery一样去学，就容易的多了。

4、D3的知识体系：

          1.选择集、数据绑定、Dom操作。

          2.比例尺和坐标轴。

          3.绘制(几种(类:同类)生成器)：

                  3.1 线段(类:同类)生成器。

                  3.2 区域(类:同类)生成器。

                  3.3 弧生(类:同类)成器。

                  3.4 符号(类:同类)生成器。

                  3.5 弦生(类:同类)成器。

                  3.6 对角线(类:同类)生成器。

5、学习的D3的知识准备基础：

          提示：D3的3.X版本是都基于Svg的，4.X版本是同时基于Svg和Canvas的。svg和canvas都是用来画图的，只不过有矢量图和标量图(位图)的区分。

          1.Svg(可缩放矢量图形)

                   1.1  矩形(rect)

                   1.2 圆形(circle)

                   1.3 椭圆形(ellipse)

                   1.4 多边形(polygon)

                   1.5 线段(line)

                   1.6 折线(ployline)

                   1.7 路径(path)

                   1.8 文字(text)

          2.选择集和数据绑定：

                   我们把d3.select()和d3.selectAll() 返回的对象称为选择集。对象的添加、删除、修改的操作都需要使用选择集。选择集还是数据绑定的受体。

                   selection.data()  即 d3.select().data() 可以将 数组的各项 分别绑定在 选择集查找到的各个元素上。

          3.数据绑定最重要的三个选择集：

                    update(需要更新的元素) ：

                             含有数据的数组长度  等于  页面的DOM元素。这种情况下数组长度和元素数量相等。这种动作称为更新。

                             表达式：var uptate = d3.select(element).data(Array);

                    enter(需要添加的元素) ：

                              含有数据的数组长度 大于 页面的DOM元素。   这种情况下页面的元素数据不够，需要添加的那一部分DOM元素称为enter()。

                              表达式：var enter = uptate.enter().append(element);

                   exit(需要删除的元素)：

                             含有数据的数组长度  小于  页面的DOM元素。这种情况下元素数量多了，需要删掉的那一部分DOM元素称为exit()。

                             表达式：var exit = updata.exit().remove(element);

6、DOM操作：

              attr()：元素属性操作。

              append(): 在被选元素的结尾（仍然在内部）插入指定内容。

              insert(): 把元素插入到容器指定的位置（按索引关系）。

7、加载数据：

              d3.json(url 地址 ,callback 回调函数)

              表达式：d3.json("data.json",function(error1,data1) {console.log(error1, data1)});

8.D3布局：

      捆绑布局。

      弦布局。

      树布局。

      矩阵树布局。

     力布局。

     包布局。

     分区布局。

     堆叠布局。

      直方图布局。

      饼布局。

       地图。

9、举例 树图入门(其它图与之类似)：

          1.树图布局API：

                   d3.layout.tree()：创建一个树图布局。

                   tree.size()：设置树图的容器的宽高。

                    tree.separation([separation])设置相邻节点间隔。

                    tree.nodes(root)根据root计算获取节点数组。

                    tree.links(nodes)根据nodes计算获取连线数组。

                   总结：根据两点绘制一条线段的结论得出，links 个数总比nodes个数 少一个。

          2.节点(nodes)对象包含以下属性：

                        parent：父节点。

                        children：子节点。

                        depth：节点深度。

                        x：节点的x坐标。

                        y：节点的y坐标。

          3.节点间连线(links)对象，包含以下属性：

                        source：源节点(连线的前半段节点)。

                        target：目标节点(连线的后半段节点)。

 10、举例：树图实现步骤(其它图与之类似)：

          1. 选中页面给页面添加svg标签；设置Svg绘制区域的宽和高；添加g元素(svg的group分组标签元素)并设置位置。

          2.生成树状布局，设置树图布局容器尺寸。

          3..对角线生成器,并旋转90度。

          4.请求数据：

              4.1获取nodes节点数组和links连线数组。               4.2生成连线。               4.3生成节点。               4.4给节点添加圆圈，设置半径。               4.5给节点添加文本，设置文本的样式位置。

11、树图代码实现demo：

效果图：

将数据和HTML代码复制到本地，可以直接运行。数据文件与HTML文件处于同级目录

//树图 json格式本地数据准备  treeData.json 

{ "name":"如何学习D3", "children": [     {        "name":"预备知识" ,          "children":         [                 {"name":"HTML & CSS" },                 {"name":"JavaScript" },                 {"name":"DOM" },                 {"name":"SVG" }         ]        },            {          "name":"安装" ,          "children":         [             {                 "name":"记事本软件",                 "children":                 [                     {"name":"Notepad++"},                     {"name":"EditPlus"},                     {"name":"Sublime Text"}                 ]             },             {                 "name":"服务器软件",                 "children":                 [                     {"name":"Apache Http Server"},                     {"name":"Tomcat"}                 ]             },             {"name":"下载D3.js"}         ]      },          {          "name":"入门",         "children":         [             {                 "name":"选择集",                 "children":                 [                     {"name":"select"},                     {"name":"selectAll"}                 ]             },             {                 "name":"绑定数据",                 "children":                 [                     {"name":"datum"},                     {"name":"data"}                 ]             },             {"name":"添加删除元素"},             {                 "name":"简单图形",                 "children":                 [                     {"name":"柱形图"},                     {"name":"折线图"},                     {"name":"散点图"}                 ]             },             {"name":"比例尺"},             {"name":"生成器"},             {"name":"过渡"}         ]      },          {          "name":"进阶" ,          "children":         [             {                 "name":"布局的应用",                 "children":                 [                     {"name":"饼状图"},                     {"name":"树状图"},                     {"name":"矩阵树图"}                 ]             },             {"name":"地图"}         ]     } ] }

                      d3-tree树图实现                      /* 圈圈节点样式 */            .node circle{                 fill: #fff;                 stroke: steelblue;                 stroke-width:1.5px;             }             /* 文字样式 */            .node text{                 font-size: 12px;             }             /* 连线的样式 */            .link{                 fill: none;                 stroke: #ccc;                 stroke-width: 1.5px;             }                                                          // 1、 选中页面给页面添加svg标签；设置Svg绘制区域的宽和高；添加g元素(svg的group分组标签元素)并设置位置。            var width = 500;             var height = 500;             var svg = d3.select('body')                     .append('svg')                     .attr('width',width)                     .attr('height',height)                         .append('g')                             .attr('transform','translate(50,0)')             // 2、生成树状布局，设置树图布局容器尺寸。            var tree = d3.layout.tree()                     .size([360, 320]);             // 3、对角线生成器,并旋转90度。            var diagonal  = d3.svg.diagonal()                     .projection(d=> [d.y,d.x]);  //横纵坐标对调(x,y) => (y,x)                     // 4、请求数据：                d3.json('treeData.json',function(error,root){                     // 4.1获取nodes节点数组和links连线数组。                    var nodes = tree.nodes(root);                     var links = tree.links(nodes);                     // 4.2生成连线。                    var link = svg.selectAll('.link')                             .data(links)                             .enter()                                 .append('path')                                 .attr('class','link')                                 .attr('d',diagonal)                         // 4.3生成节点。                    var node = svg.selectAll('.node')                             .data(nodes)                             .enter()                                 .append('g')                                 .attr('class','node')                                 .attr('transform',function(d){                                     return 'translate('+d.y+','+d.x+')'                                 })                                                          // 4.4给节点添加圆圈，设置半径。                    node.append('circle')                         .attr('r',5);                     // 4.5给节点添加文本，设置文本的样式位置。                    node.append('text')                         .text(d=>d.name)                         .attr('dx',d=> d.children? -15:15)                         .attr('dy',5)                         .attr('text-anchor',d=> d.children? 'end':'start');                 })                                 

本文介绍的D3.js学习引导，仅供大家参考，如果更好的学习方式，请多多指教。感谢阅读，谢谢。