本人的个人博客为: 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. linux笔记_day11_shell编程

    1.条件测试类型: 整数测试 字符测试 文件测试 条件测试的表达式: [ expression ] 必须有空格 [[ expression ]] test expression 整数比较 : -eq  ...

  2. 2017/05/22 java 基础 随笔

    多态:一种事物多种形态 前提:1.子父类继承关系 2.方法复写.重写 3.父类引用指向子类对象 成员变量: package com.huawei; public class Demo1 { publi ...

  3. Replication容量和错误日志

    gtid排错 set sql_log_bin=off;  #人为关闭二进制日志

  4. Python_oldboy_自动化运维之路_面向对象2(十)

    本节内容: 面向对象程序设计的由来 什么是面向对象的程序设计及为什么要有它 类和对象 继承与派生 多的态与多态性 封装 静态方法和类方法 面向对象的软件开发 反射 类的特殊成员方法 异常处理 1.面向 ...

  5. Linux系统产生随机数/dev/random 和 /dev/urandom

    1.  基本介绍 /dev/random和/dev/urandom是Linux系统中提供的随机伪设备,这两个设备的任务,是提供永不为空的随机字节数据流.很多解密程序与安全应用程序(如SSH Keys, ...

  6. ssh隐藏的sftp功能的使用

    sftp是Secure File Transfer Protocol的缩写,安全文件传送协议.可以为传输文件提供一种安全的加密方法.sftp 与 ftp 有着几乎一样的语法和功能.SFTP 为 SSH ...

  7. laravel 5.1 Model 属性详解

    <?php namespace Illuminate\Database\Eloquent; /** * 下面提到某些词的含义: * 1.覆盖: 在继承该类 \Illuminate\Databas ...

  8. SqlServerDBCC SHRINKFILE不起作用

    检查索引碎片的结果: CREATE DATABASE test_shrink USE test_shrink CREATE TABLE show_extent(a INT,b NVARCHAR(390 ...

  9. 使用Ocelot构建GateWay

    添加Nuget包:Ocelot 添加配置文件Ocelot.json 具体配置可以看另一篇Ocelot配置 Json配置文件主要包含两个根节点: ReRoutes:路由重定向配置 都是数组结构 可以配置 ...

  10. asserts文件存到外部SD卡里

    package com.example.wang.testapp3; import android.content.res.AssetManager; import android.graphics. ...