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

一、布局是什么

　　布局，英文是 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. NotificationObject.cs

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.C ...

  2. Balance

    Balance Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 11947 Accepted: 7464 Description ...

  3. H - Solve this interesting problem 分类： 比赛 2015-07-29 21:06 15人阅读 评论(0) 收藏

    Have you learned something about segment tree? If not, don't worry, I will explain it for you.  Segm ...

  4. 使用Markdown写文档

    转载于:http://blog.csdn.net/xiahouzuoxin/article/details/19752603 Markdown是一种网络书写语言,其目标是实现易读易写,且兼容HTML语 ...

  5. winform中利用反射实现泛型数据访问对象基类(2)

    在1的基础上做了一点改进 参数化处理 看上去更简洁 无主键情况下 update 方法需要改进 insert delete没有问题  /// <summary>     /// DAO基类 ...

  6. apahce

    基本的操作方法:本文假设你的apahce安装目录为/usr/local/apache2,这些方法适合任何情况 apahce启动命令:推荐/usr/local/apache2/bin/apachectl ...

  7. js 定位到某个锚点

    js 定位到某个锚点 html页面内可以设置锚点,锚点定义 <a name="firstAnchor">&nsbp;</a> 锚点使用 <a  ...

  8. CentOs6.5中安装和配置vsftp简明教程

    一.vsftp安装篇 # 查看是否已经安装了vsftp: rpm -qa|grep vsftpd # 安装vsftpd(需要root权限)yum -y install vsftpd# 启动vsftpd ...

  9. Java开发中经典的小实例-(if(参数){}else{})

    import java.util.Scanner; public class Calculate {    public static void main(String[] args) {       ...

  10. CALayer总结（一）

    1.geometryFlipped   设置为yes,则子图层或者子视图本来相对于左上角放置 改为 相对于左下角放置: 2.contents 3.contentGravity: kCAGravityC ...