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

一、布局是什么

　　布局，英文是 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. 2015-09-17 001 存储过程数据操作类 H_data_Helper

    using System;using System.Data;using System.Configuration;using System.Linq;using System.Web;using S ...

  2. Uva 1599 最佳路径

    题目链接:https://uva.onlinejudge.org/external/15/1599.pdf 题意: 保证在最短路的时候,输出字典序最小的路径. 方法: 路径上有了权值,可以利用图论的数 ...

  3. Combox控件初始化项的技巧

    有时候combox下拉项就是几条固定的,不需要做数据绑定,但是如果直接采用字符串集合编辑器的时候,SelectedValue貌似会不起作用. 于是简单的封装一下 /// <summary> ...

  4. PowerShell调用jira rest api实现jira统计自动化

    通过调用JIRA Rest web api实现统计自动化,首先进行登录模拟: $content = @{username='用户名';password='密码'} $JSON=$content|con ...

  5. 多条件查询（php+mysql） 租房子例子

    <body> <?php //多条件 $tiaojian2= " 2=2 "; $attr2 = ""; //判断区域 if(!empty($ ...

  6. 窗口移动--基类(BaseForm)

    #region 窗口移动 private bool _isLeftButtonDown = false; public const int HTCAPTION = 0x0002; protected ...

  7. Cache缓存对象缓存对象

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DemoCache.aspx ...

  8. C#（数据类型）

    刚开始学c#!!!

  9. 【leetcode❤python】 299. Bulls and Cows

    #-*- coding: UTF-8 -*-class Solution(object):      def getHint(self, secret, guess):          " ...

  10. RC4加密解密算法

    RC4相对是速度快.安全性高的加密算法.在实际应用中,我们可以对安全系数要求高的文本进行多重加密,这样破解就有一定困难了.如下测试给出了先用RC4加密,然后再次用BASE64编码,这样双重锁定,保证数 ...