D3.js绘制树形图

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() 可以将 数组的各项 分别绑定在 选择集查找到的各个元素上。

                   提示：d3对象有点像jQuery里的$对象。

          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":"地图"}
        ]
    }
]
}

 

 <!-- 代码实现 -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>d3-tree树图实现</title>
        <style type="text/css">
            /* 圈圈节点样式 */
            .node circle{
                fill: #fff;
                stroke: steelblue;
                stroke-width:1.5px;
            }
            /* 文字样式 */
            .node text{
                font-size: 12px;
            }
            /* 连线的样式 */
            .link{
                fill: none;
                stroke: #ccc;
                stroke-width: 1.5px;
            }
        </style>
    </head>
    <body>
        <!-- 0.引入d3.js库 -->
        <script src="https://d3js.org/d3.v3.js"></script>
        <script type="text/javascript">
            // 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');
                })
                  
        </script>
    </body>
</html>

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