本人的个人博客为： 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 】 常见可视化图形的更多相关文章

  1. 【 D3.js 入门系列 — 11 】 入门总结

    D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...

  2. 【 D3.js 入门系列 --- 0 】 简介和安装

    D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...

  3. 【 D3.js 入门系列 --- 0 】 简介及安装

    家是我的个人博客: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/.转载请注明出处,谢谢. D3的全称是(Data-D ...

  4. 【 D3.js 入门系列 --- 3 】 做一个简单的图表！

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  5. 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld

    记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...

  6. 【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素

    在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...

  7. 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素

    接着上一讲的内容,这次讨论如何选择元素和使用数据.    现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...

  8. 【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld

    下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <ti ...

  9. 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...

  10. 【 D3.js 入门系列 --- 2.1 】 关于怎样选择，插入，删除元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 在D3.js中,选择 ...

随机推荐

  1. CodeAction_beta02 斐波那契 （多维DP）

    题面: solution: 这题和斐波那契数列没有任何关系!!!!! 这题就是一个无脑DP!!!!!!!!!! 因为所有数都要出现至少一次,所以只需考虑其组合而不用考虑其排列,最后乘个 n!就是了(意 ...

  2. 关闭ios弹出框：“would like to use your current location”

    图一: 图二: 使用cordova生成ios项目,首次打开获取用户定位时会弹出两次对话框,关闭图二中对话框方法: document.addEventListener("deviceready ...

  3. vue路由DEMO

    index.js,index.vue,course.vue,master.vue等 import Vue from 'vue' import Router from 'vue-router' impo ...

  4. Linux DRM KMS 驱动简介【转】

    转自:https://blog.csdn.net/yangkuanqaz85988/article/details/48689521 Whoops,上次写完<Linux DRM Graphic ...

  5. crontab每10秒钟执行一次

    1.使用sleep 在crontab中加入 * * * * * sleep 10; /bin/date >>/tmp/date.txt* * * * * sleep 20; /bin/da ...

  6. 数据库SQL中case when函数的用法

    Case具有两种格式,简单Case函数和Case搜索函数.这两种方式,可以实现相同的功能.简单Case函数的写法相对比较简洁,但是和Case搜索函数相比,功能方面会有些限制,比如写判断式. 简单Cas ...

  7. 谈谈如何查看Android项目方法数

    我们都知道,Android App的方法数是有天花板的,在方法数达到65536时,就会出现打包异常,这个时候,我们需要去除一些不需要的三方工具包,或者采用多Dex技术分包,都能达到正常打包的效果. 可 ...

  8. 解决Too many connections问题

    有些人觉得,解决too many connections问题,灰非简单,down了mysql,修改my.cnf调大max_connections,好吧,你想法是没错的,这的确可以解决问题,但试问对于线 ...

  9. 使用VS2013、TFS2013和Git进行分布式团队协作

    题记:呵呵,首先声明,题目起的有点大,其实我只想介绍下VS2013和TFS2013新加入的Git功能,也不是在VS中使用Git的详细向导(以后有空再详细分享给大家).这篇文章虽然在写这篇文章<V ...

  10. linux修改文件读写执行权限命令chmod

    之前用chmod的时候都是简单的类似下面这样使用: $ file 也有时候可能会修改一个目录下所有子目录和文件: $ directory -R 也知道3个数字(例子中的755)分别代表赋予 “文件属主 ...