【 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中,选择 ...
随机推荐
- Linux - awk 文本处理工具四
awk 常用示例 获取本机 IP 方式 /sbin/ifconfig |awk -v RS="Bcast:" '{print $NF}'|awk -F: '/addr/{print ...
- 两个不能同时共存的条件orWhere查询
举例: //我的所有的积分记录 1,我分享的:2,我点击的:(两个条件不能共存) $activity_log = ActivitySharedLog::where(function ($query) ...
- HDU 2049 不容易系列之(4)——考新郎 (错排+组合)
题目链接. Problem Description 国庆期间,省城HZ刚刚举行了一场盛大的集体婚礼,为了使婚礼进行的丰富一些,司仪临时想出了有一个有意思的节目,叫做"考新郎",具体 ...
- Vue 使用 prerender-spa-plugin 添加loading
主要配置代码: new PrerenderSPAPlugin({ staticDir: path.join(__dirname, 'dist'), routes: ['/', '/introducti ...
- 分模块开发创建service子模块——(八)
1.右击父工程新建maven子模块
- mybatis延迟加载——(十二)
1. 什么是延迟加载 resultMap可以实现高级映射(使用association.collection实现一对一及一对多映射),association.collection具备延迟加载功能 ...
- pytorch之LSTM
from:http://pytorch-cn.readthedocs.io/zh/latest/package_references/torch-nn/#recurrent-layers class ...
- 【Windows编程】大量病毒分析报告辅助工具编写
解决重复劳动 是否在分析单个病毒时很爽,分析N个病毒写报告很机械的情况.. 1)样本下载多个文件,这些文件写报告时要加上这些文件的MD5 2)写报告时明明是17个MD5,实际样本有18个的情况.不知道 ...
- 从Dying gasp功能看Linux的响应速度(zhuan)
转自https://blog.csdn.net/qq_20405005/article/details/77967358 前一阵子在做dying gasp功能测试,过程中恰好测试到了Linux的响应速 ...
- spring mvc file upload
文件上传 1.需要导入两个jar包 2.在SpringMVC配置文件中加入 1 2 3 4 <!-- upload settings --> <bean id="multi ...