【 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中,选择 ...
随机推荐
- 矩阵乘法优化DP
本文讲一下一些基本的矩阵优化DP的方法技巧. 定义三个矩阵A,B,C,其中行和列分别为$m\times n,n \times p,m\times p$,(其中行是从上往下数的,列是从左往右数的) $C ...
- android ViewPager之PagerAdapter中View的重用
在写PagerAdapter的时候,需要重写instantiateItem(ViewGroup container ,int position) 此方法中,将需要加载的View,添加到conta ...
- 洛谷 P5089: CodeForces #500 (Div. 1) B / 1012B : Chemical table
题目传送门:洛谷P5089. 题意简述: 一张 \(n \times m\) 的表格,有一些格子有标记,另外一些格子没有标记. 如果 \((r_1,c_1),(r_1,c_2),(r_2,c_1)\) ...
- 【ARTS】01_01_左耳听风-20181112~1116
每周至少做一个 leetcode 的算法题.阅读并点评至少一篇英文技术文章.学习至少一个技术技巧.分享一篇有观点和思考的技术文章.(也就是 Algorithm.Review.Tip.Share 简称A ...
- usb_control_msg函数用法和说明
usb_control_msg是没有用到urb的在USB中简单进行发送和接收的一种机制,用于少量的数据通信.原型为: 程序代码 linux+v2.6.35/drivers/usb/core/mess ...
- Python学习一|anaconda的安装问题以及Python语言的特点
安装时遇到的问题 安装anaconda3.0到D盘之后,配置好两个环境变量:D:\anaconda和D:\anaconda\Scripts.发现在命令行中执行python指令可以,但conda指令却是 ...
- apollo配置相关
一.运维 1. 数据库ConfigDB,PortalDB 2. 基础服务 :Config-Service,(Meta-Server),Admin-Service,Portal 3. 应用在SIT.UA ...
- js中ajax异步问题
1.JS的执行顺序问题 浏览器是按照从上到下的顺序解析页面,因此正常情况下,JavaScript脚本的执行顺序也是从上到下的,即页面上先出现的代码或先被引入的代码总是被先执行,即使是允许并行下载Jav ...
- JAVA学习(二) String使用equals方法和==分别比较的是什么?(转)
String使用的equals方法和==的区别 equals方法和==的区别 首先大家知道,String既可以作为一个对象来使用,又可以作为一个基本类型来使用.这里指的作为一个基本类型来使用只是指 ...
- javaweb笔记三
//写了注解,就不用在web.xml里进行注册@WebServlet(urlPatterns="/my",name="my",loadOnStartup=1,i ...