布局，可以理解成 “制作常见图形的函数”，有了它制作各种相对复杂的图表就方便多了。

一、布局是什么

　　布局，英文是 Layout。从字面看，可以想到有“决定什么元素绘制在哪里”的意思。布局是 D3 中一个十分重要的概念。

　　D3 与其它很多可视化工具不同，相对来说较底层，对初学者来说不太方便，但是一旦掌握了，就比其他工具更加得心应手。下图展示了 D3 与其它可视化工具的区别：

　　

　

　 可以看到，D3 的步骤相对来说较多。坏处是对初学者不方便、也不好理解。好处是能够制作出更加精密的图形。因此，我们可以据此定义什么时候选择 D3 比较好：

  • 选择 D3：如果希望开发脑海中任意想象到的图表。
  • 选择 Highcharts、Echarts 等：如果希望开发几种固定种类的、十分大众化的图表。

二、如何理解布局

　　从上面的图可以看到，布局的作用是：将不适合用于绘图的数据转换成了适合用于绘图的数据。

　　因此，为了便于初学者理解，本站的教程叫布局的作用解释成：数据转换。

三、布局有哪些

　　D3 总共提供了 12 个布局：饼状图（Pie）、力导向图（Force）、弦图（Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图（Pack）、直方图（Histogram）、分区图（Partition）、堆栈                                                图（Stack）、矩阵树图（Treemap）、层级图（Hierarchy）。
　　12 个布局中，层级图（Hierarchy）不能直接使用。集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的。如此一来，能够使用的布局是 11 个（有 5 个是由层级图扩展而来）。

　　这些布局的作用都是将某种数据转换成另一种数据，而转换后的数据是利于可视化的。

　　Bundle  —-  捆图

　　　　

　　Chord  —-  弦图

　　　　

　　Cluster  —-  集群图

　　　　

　　Force  —-  力学图、力导向图

　　　　

　　Histogram  —-  直方图（数据分布图）

　　　　

　　Pack  —-  打包图

　　　　

　　Partition  —-  分区图

　　　　

　　Pie  —-  饼状图

　　　　

　　Stack  —-  堆栈图

　　　　

　　Tree  —-  树状图

　　　　

　　Treemap  —-  矩阵树图

　　　　

D3.js 布局的更多相关文章

  1. 【 D3.js 视频系列 】 飞速入门

    本教程共包含 6 个视频,目的是为了帮助初学者快速入门,以便阅读本站其他文章. 本教程的名称为"飞速入门",是为初学者准备的,其中包括了 D3 开发中最基础的知识.对 D3 掌握得 ...

  2. 【 D3.js 高级系列 — 10.0 】 思维导图

    思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...

  3. 【 D3.js 高级系列 — 4.0 】 矩阵树图

    矩阵树图(Treemap),也是层级布局的扩展,根据数据将区域划分为矩形的集合.矩形的大小和颜色,都是数据的反映.许多门户网站都能见到类似图1,将照片以不同大小的矩形排列的情形,这正是矩阵树图的应用. ...

  4. 【 D3.js 高级系列 — 3.0 】 堆栈图

    堆栈图布局(Stack Layout)能够计算二维数组每一数据层的基线,以方便将各数据层叠加起来.本文讲解堆栈图的制作方法. 先说说什么是堆栈图. 例如,有如下情况: 某公司,销售三种产品:个人电脑. ...

  5. 【 D3.js 高级系列 — 2.0 】 捆图

    捆图(Bundle)是 D3 中比较奇特的一个布局,只有两个函数,而且需要与其它布局配合使用.本文讲述捆图的制作方法. 有关捆图的例子极少,很容易找到的是:http://bl.ocks.org/mbo ...

  6. 【 D3.js 高级系列 — 1.0 】 文本的换行

    在 SVG 中添加文本是使用 text 元素.但是,这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢? 高级系列开篇前言 从今天开始写高级系列教程.还是那句话,由于本人实力有限,不一定保证入 ...

  7. 【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定

    本章讨论在力学图中经常使用到的事件( Event ),然后对[p=555">进阶 - 第 2.0 章]的人物关系图进行改进.使用户可以固定拖拽的对象. 在[入门 - 第 9.2 章]和 ...

  8. 【 D3.js 进阶系列 — 5.0 】 直方图

    直方图用于描写叙述概率分布,D3 提供了直方图的布局 Histogram 用于转换数据. 假设有数组 a = [10, 11, 11.5, 12.5, 13, 15, 19, 20 ],如今把10~2 ...

  9. 基于cytoscape.js 、 d3.js实现的关系图谱初级版本

    前面的文章已经介绍了cytoscape.js . d3.js的安装及简单demo,现在展示从html页面转移到vue项目下的最初版的demo 效果图: 代码如下: <template> & ...

随机推荐

  1. Removing Columns 分类： 贪心 CF 2015-08-08 16:10 10人阅读 评论(0) 收藏

    Removing Columns time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  2. Spring资源访问

    资源访问 1.Resource Jdk提供的访问资源的类并不能很好地满足各种底层的资源访问需求, 比如缺少从类路径或者web容器的上下文中获取资源的操作类. 鉴于此, Spring设计了一个Resou ...

  3. html 标签学习

    form 属性 定义和用法 enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码. 默认地,表单数据会编码为 "application/x-www-form-urlencod ...

  4. torch基本操作

    1.在terminal中th进入troch,th+文件名.lua运行文件.进入torch之后,dofile+"文件名.lua"运行文件

  5. 2016年10月21日 星期五 --出埃及记 Exodus 19:5

    2016年10月21日 星期五 --出埃及记 Exodus 19:5 Now if you obey me fully and keep my covenant, then out of all na ...

  6. Python安装指南

    说明:我的安装环境是centos6.4 ,32位系统:(#号之后内容为注释说明内容) 1.准备 centos是自带python的,所以可以在shell下直接执行:python 可以看到相应的打印信息, ...

  7. 是否用new来新建对象

    class A{ }: 1.不使用new来新建对象 A a: 使用完后什么也不用做,系统自动调用析构函数.使用空间是栈. 2.使用new来新建对象 A* a=new A();   delete a;/ ...

  8. QT笔记之自定义窗口拖拽移动

    1.QT自定义标题栏,拖拽标题栏移动窗口(只能拖拽标题,其他位置无法拖拽) 方法一: 转载:http://blog.sina.com.cn/s/blog_4ba5b45e0102e83h.html . ...

  9. JavaScript运算符

    JavaScript运算符 1.算数运算符 设定a = 5. 运算符 描述 例子 结果 + 加 b=a+2 b=7 - 减 b=a-2 b=3 * 乘 b=a*2 b=10 / 除 b=a/2 b=2 ...

  10. github 修改fork的代码之后如何提交代码并pull request

    官方的解释还是有点模糊,我是参照这篇文章来的. http://www.linuxidc.com/Linux/2012-12/76922.htm 关于Git的版本管理的原理,我是从这篇文章里面学习的. ...