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

一、布局是什么

　　布局，英文是 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. c#xml追加读取节点

    读取 if (File.Exists("Book.xml")) { XmlDocument doc = new XmlDocument(); doc.Load("Book ...

  2. 20150625_Andriod_02_ListView2_多条目显示_选中

    android listview 参考地址: http://www.cnblogs.com/zhengbeibei/archive/2013/05/14/3078805.html  http://xy ...

  3. 如何让其他计算机访问我的计算机上数据库mysql

    第一种:能ping通,说明你们在同一个网络中,可以直接访问.你只要在你的登录用户中的帐号加上可外部访问就可以了...也就是授权.比如你的帐号是root   你可以进入mysql后, 你可以看到,每个帐 ...

  4. python代码

    f=open('/home/xbwang/newtextsimilarity/data/glove/glove.840B.300d.txt','r') count = 0 print ' '.join ...

  5. 2016年12月11日 星期日 --出埃及记 Exodus 21:6

    2016年12月11日 星期日 --出埃及记 Exodus 21:6 then his master must take him before the judges. He shall take hi ...

  6. 2016年10月22日 星期六 --出埃及记 Exodus 19:6

    2016年10月22日 星期六 --出埃及记 Exodus 19:6 you will be for me a kingdom of priests and a holy nation.' These ...

  7. Linux下常用的shell命令记录1

     硬件篇 CPU相关 lscpu #查看的是cpu的统计信息. cat /proc/cpuinfo #查看CPU信息详细信息,如每个CPU的型号,主频等 内存相关 free -m #概要查看内存情况 ...

  8. 关于htons和htonl

    htons的功能:将一个无符号短整型数值转换为网络字节序,即大端模式(big-endian) 参数u_short hostshort: 16位无符号整数 返回值:TCP / IP网络字节顺序. hto ...

  9. 是否用new来新建对象

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

  10. UVA 12050 - Palindrome Numbers 模拟

    题目大意:给出i,输出第i个镜像数,不能有前导0. 题解:从外层开始模拟 #include <stdio.h> int p(int x) { int sum, i; ;i<=x;i+ ...