【 D3.js 入门系列 --- 9 】 常见可视化图形
本人的个人博客为: www.ourd3js.com
csdn博客为: blog.csdn.net/lzhlzz
转载请注明出处,谢谢。
Layout ,直译为“布局,安排”。但在 D3 中不是这个意思。
D3 中有非常多 Layout 函数,它们不是为了在画面中布局什么。在 D3 中是对输入的数据进行转换,转换成比較easy进行可视化的数据。实际进行可视化时,须要其它的代码。我们能够简单地把 Layout 理解为“制作常见图形的函数”,比方饼状图等等。
D3 中一共提供了12个 Layout。API简单介绍可见: https://github.com/mbostock/d3/wiki/Layouts
1. Bundle ---- 捆图

2. Chord ---- 弦图

3. Cluster ---- 集群图

4. Force ---- 力学图

5. Hierarchy ---- 层级图
不能直接使用,要和其它的 layout 一起使用。
6. Histogram ---- 柱形图

7. Pack ---- 打包图

8. Partition ---- 分区图

9. Pie ---- 饼状图

10. Stack ---- 堆栈图

11. Tree ---- 树状图

12. Treemap ---- 矩阵树图

详细到每个 Layout 的用法。会在后面几节中介绍。
【 D3.js 入门系列 --- 9 】 常见可视化图形的更多相关文章
- 【 D3.js 入门系列 — 11 】 入门总结
D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...
- 【 D3.js 入门系列 --- 0 】 简介和安装
D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...
- 【 D3.js 入门系列 --- 0 】 简介及安装
家是我的个人博客: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/.转载请注明出处,谢谢. D3的全称是(Data-D ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表!
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
- 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld
记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...
- 【 D3.js 入门系列 --- 2.1 】 关于如何选择,插入,删除元素
在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...
- 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素
接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...
- 【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld
下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <ti ...
- 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...
- 【 D3.js 入门系列 --- 2.1 】 关于怎样选择,插入,删除元素
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 在D3.js中,选择 ...
随机推荐
- 记关于vue-cli3 本地代理模拟数据的实践
网上说的基本都是使用express或http-server作为服务器或其它什么东西自己把玩php也有些年头,就用php好了 服务环境 apache,php先配置好隐藏php后缀扩展名: 在httpd. ...
- jmeter的环境配置
工具/原料 WIN7 Jmeter安装包 JDK 一.安装JDK 1 [步骤一]安装jdk 1.下载jdk,到官网下载jdk,地址:http://www.oracle.com/technetw ...
- 搭建RabbitMQ集群(Docker)
前一篇搭建RabbitMQ集群(通用)只是把笔记直接移动过来了,因为我的机器硬盘已经满了,实在是开不了那么虚拟机. 还好,我的Linux中安装了Docker,这篇文章就简单介绍一下Docker中搭建R ...
- spring boot JPA中实体类常用注解
spring boot jpa中的注解很多,参数也比较多.没必要全部记住,但是经常查看官方文档也比较麻烦,记录一下一些常用的注解.通过一些具体的例子来帮助记忆. @Entity @Table(name ...
- Window8.1下oracle数据库报:ora-12170 操作超时
PLSQL 链接本机:oracle11g 服务名:orcl 一直链接不上,等了大概3分钟, 提示:ora-12170操作超时: 重启了数据库 问题还是无法解决;上网搜了一下,发现报ora-1217 ...
- JavaScript之this学习心得
this在运行时绑定,并不是在编写时绑定,它的上下文取决于函数调用的各种条件.this既不指向自身,也不指向函数的词法作用域.this是在函数被调用时发生的绑定,指向什么完全取决于函数在哪里被调用. ...
- HDU 2512 一卡通大冒险(第二类斯特林数+贝尔数)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2512 题目大意:因为长期钻研算法, 无暇顾及个人问题,BUAA ACM/ICPC 训练小组的帅哥们大部 ...
- finall和set和构造方法的参数意义
package demo04; /* * 形状 */public abstract class Shape { // 求周长 public abstract double getGrith(); // ...
- python中使用pillow绘制汉字
# pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pillow from PIL import Image, ImageFont, I ...
- 解决 Delphi XE5 写Android程序的No resource identifier found for attribute... 错误【转】
原文:http://www.hxhlb.cn/article/32142aaeb67bbc05379369c3.html 那一天,我装上了RAD Studio XE5. 当天晚上,我就写了一个小小的A ...