【 D3.js 入门系列 --- 9 】常见可视化图形

本人的个人博客为： www.ourd3js.com

转载请注明出处，谢谢。

Layout ，直译为“布局，安排”。但在 D3 中不是这个意思。

D3 中有很多 Layout 函数，它们不是为了在画面中布局什么，在 D3 中是对输入的数据进行转换，转换成比较容易进行可视化的数据。实际进行可视化时，需要其他的代码。我们可以简单地把 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 】常见可视化图形

时间： 2024-08-05 11:12:15

【 D3.js 入门系列 --- 9 】常见可视化图形的相关文章

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

[ D3.js 入门系列 — 0 ] 简介和安装发表于2014/06/12 近年来,可视化越来越流行,许多报刊杂志.门户网站.新闻.媒体都大量使用可视化技术,使得复杂的数据和文字变得十分容易理解,有一句谚语“一张图片价值于一千个字”,的确是名副其实.各种数据可视化工具也如井喷式地发展,D3 正是其中的佼佼者. 1. D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript

【 D3.js 入门系列 --- 9.6 】打包图的制作

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 打包图( Pack ),用于包含与被包含的关系,也表示各个对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 先看本节所使用的数据: city2.json 这是各城市所属关系的数据.我们现在要用 D3 的 layout 来转换数据,使其容易进行可视化处理. var pack = d3.layout.pack() .size([ width, heigh

【 D3.js 入门系列 --- 7 】理解 update, enter, exit 的使用

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 在前面几节中反复出现了如下代码: svg.selectAll("rect") .data(dataset) .enter() .append("rect") 当所选择的 rect 数量比绑定的数据 dataset 的数量少的时候,通常会用到以上代码,这一节就详细说说当被选择元素和数据数量不一致时该如何处理. 这一节将涉及到三个函数.

【 D3.js 入门系列 --- 10 】地图的绘制

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 地图的制作在 D3 中可以说是最重要的一环.因为在进行数据可视化时,很多情况都会和地图联系在一起,如中国各省的人口多少,GDP多少等,都可以和地图联系在一起. D3 中制作地图所需要的文件问 JSON 文件.JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.关于 JSON 的语法格式,可以在: http://www.w3s

【 D3.js 入门系列 --- 9.3 】弦图的制作

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 弦图( Chord ),主要用于表示两个节点之间的联系.如下图: 两点之间的连线表示,谁和谁具有联系: 线的粗细表示权重: 上面的介绍源于: http://circos.ca/guide/tables/ ,我就不详细介绍了,还是很好理解的. 那么在 D3 中怎么用 layout 转换出弦图所需要的数据,并作图呢?请耐心往下看. 1. 首先给出数据 var ci

【 D3.js 入门系列 --- 9.5 】树状图的制作

这一节学习树状图的制作.树状图的制作和集群图完全相同,经过这两种 layout 转换后的数据也很相似. 本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 树状图( Tree )通常用于表示层级.上下级.包含与被包含关系.树状图的制作和 9.4节集群图的制作的代码几乎完全一样.不错,你没看错,几乎完全一样.那么为什么要把这两种图分开,它们有什么不同呢?先来看看对于同一组数据,它们的结果有什么不同.数据为: {

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

D3 新专题首页一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作. D3.js 最早的 v1.0 版本号是由 Michael Bostock 于2011年2月18日公布,其后经过多人的不断完好,眼下最新的版本号为 v3.4.11.从公布至今三年多的时间里,D3.js 在国外不断有人尝试并制作教程.成为了流行的数据可视化工具.可是眼下在国内能查询到中文资料还比較少

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

家是我的个人博客: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/.转载请注明出处,谢谢. D3的全称是(Data-Driven Documents),顾名思义能够知道是一个关于数据驱动的文档的javascript类库.假设你不知道什么是javascript.请先学习javascript的相关知识. 说得简单一点,D3.js主要是用于操作数据的,它通过使用HTML.SVG.CSS来给你的数据注入生命,即转换为各种简

【 D3.js 入门系列 — 10.3 】 GeoJSON 文件和 TopoJSON 文件的区别和联系

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 前些天有朋友留言询问 GeoJSON 文件和 TopoJSON 文件的关系,正好我其实也不是十分明了,查询了一番后整理如下,还望大家指证. 这两种文件都是基于 JSON 语法的,首先来说一下 JSON 语法和文件是怎样的. 1. JSON 格式 JSON(JavaScript Object Notation) 是一种轻量级的数据交换语言,以文字为基础,且易于让人阅读

【 D3.js 入门系列 --- 9 】 常见可视化图形

【 D3.js 入门系列 --- 9 】 常见可视化图形的相关文章

【 D3.js 入门系列 --- 9 】常见可视化图形

【 D3.js 入门系列 --- 9 】常见可视化图形的相关文章