【 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笔记_day11_shell编程
1.条件测试类型: 整数测试 字符测试 文件测试 条件测试的表达式: [ expression ] 必须有空格 [[ expression ]] test expression 整数比较 : -eq ...
- 2017/05/22 java 基础 随笔
多态:一种事物多种形态 前提:1.子父类继承关系 2.方法复写.重写 3.父类引用指向子类对象 成员变量: package com.huawei; public class Demo1 { publi ...
- Replication容量和错误日志
gtid排错 set sql_log_bin=off; #人为关闭二进制日志
- Python_oldboy_自动化运维之路_面向对象2(十)
本节内容: 面向对象程序设计的由来 什么是面向对象的程序设计及为什么要有它 类和对象 继承与派生 多的态与多态性 封装 静态方法和类方法 面向对象的软件开发 反射 类的特殊成员方法 异常处理 1.面向 ...
- Linux系统产生随机数/dev/random 和 /dev/urandom
1. 基本介绍 /dev/random和/dev/urandom是Linux系统中提供的随机伪设备,这两个设备的任务,是提供永不为空的随机字节数据流.很多解密程序与安全应用程序(如SSH Keys, ...
- ssh隐藏的sftp功能的使用
sftp是Secure File Transfer Protocol的缩写,安全文件传送协议.可以为传输文件提供一种安全的加密方法.sftp 与 ftp 有着几乎一样的语法和功能.SFTP 为 SSH ...
- laravel 5.1 Model 属性详解
<?php namespace Illuminate\Database\Eloquent; /** * 下面提到某些词的含义: * 1.覆盖: 在继承该类 \Illuminate\Databas ...
- SqlServerDBCC SHRINKFILE不起作用
检查索引碎片的结果: CREATE DATABASE test_shrink USE test_shrink CREATE TABLE show_extent(a INT,b NVARCHAR(390 ...
- 使用Ocelot构建GateWay
添加Nuget包:Ocelot 添加配置文件Ocelot.json 具体配置可以看另一篇Ocelot配置 Json配置文件主要包含两个根节点: ReRoutes:路由重定向配置 都是数组结构 可以配置 ...
- asserts文件存到外部SD卡里
package com.example.wang.testapp3; import android.content.res.AssetManager; import android.graphics. ...