本人的个人博客为： 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. Jenkins mac pkg安装 后默认配置文件/启动路径

    自启动文件路径 /Library/LaunchDaemons/org.jenkins-ci.plist jenkins.war 执行文件路径 /Applications/Jenkins/jenkins ...

  2. Android学习笔记——从源码看Handler的处理机制

    可能是出于性能的考虑,Android的UI操作是非线程安全的. 也就是说,如果你在一个新开的线程中直接操作UI是会引发异常的. 但是,Android又规定,不要去阻塞UI线程!否则,轻者引起程序卡顿, ...

  3. python垃圾回收三之标记清除

    #第一组循环引用# a = [1,2] b = [3,4] a.append(b) b.append(a) del a ## #第二组循环引用# c = [4,5] d = [5,6] c.appen ...

  4. Hibernate二级缓存(未完待续)

    1.Hibernate的cache介绍: Hibernate实现了良好的Cache机制,可以借助Hibernate内部的Cache迅速提高系统的数据读取性能.Hibernate中的Cache可分为两层 ...

  5. Ubuntu 12.04将默认集成Landscape管理套件【转】

    转自:https://imtx.me/archives/1702.html 今天,我像往常一样对我的Ubuntu 12.04 Beta进行了一次常规升级,然后我发现在系统设置当中多了一个图标,叫「Ma ...

  6. vim下如何去掉windows编辑的文件中的^M

    可以去掉^M, 例如: 在终端下敲命令: dos2unix a.c 直接转换成unix格式,这样就可以去掉^M •$dos2unix filename •vim filename :%s/^M$//g ...

  7. nginx 反向代理Apache

    2014年1月13日 18:15:25 同一个域名下,不同uri走不同的应用(不同的web根目录) 实现方式: Apache分别监听两个端口,对应不同的应用 nginx监听80端口,利用locatio ...

  8. Kali Linux没有声音的解决方法

    Kali Linux系统默认状态下,root用户是无法使用声卡的,也就没有声音.启用的方法如下:         (1)在终端执行命令:systemctl --user enable pulseaud ...

  9. wpf 查找children的方法

    var newValue = (bool)args.NewValue; HZWaitLoadingEx source = (HZWaitLoadingEx)sender; ControlTemplat ...

  10. 中文分词-jieba

    支持三种分词模式: 精确模式,试图将句子最精确地切开,适合文本分析: 全模式,把句子中所有的可以成词的词语都扫描出来, 速度非常快,但是不能解决歧义: 搜索引擎模式,在精确模式的基础上,对长词再次切分 ...