【 D3.js 进阶系列 】 进阶总结

进阶系列的文章从去年10月开始写的，晃眼又是4个多月了，想在年前总结一下。

首先恭祝大家新年快乐。今年是羊年吧。前段时间和朋友聊天，聊到十二生肖里为什么没猫，我张口就道：不是因为十二生肖开会的时候猫迟到了吗？

呵呵，不知道这是谁给我灌输的观点。o(>﹏<)o

进阶系列的文章分为两部分，文章前括号里写有：

  • 【D3.js 进阶系列】
  • 【D3.js 选择集与数据详解】

虽然称之为“进阶”，但并不是说一定要看完“入门”才能看。由于本人能力有限，不能很好地整理成由易到难的学习文章。请大家挑选自己需要的阅读。

本人写文章主要也是一个自我学习的过程，错漏很多，诚心希望大家给予纠正建议。

文章前标有【D3.js 进阶系列】的文章如下：

1.0 CSV 表格文件的读取
1.1 其他表格文件的读取
1.2 读取 CSV 文件时乱码的解决方法
2.0 力学图 + 人物关系图
2.1 力学图的事件 + 顶点的固定
2.2 力学图的参数
3.0 分区图
3.1 圆形分区图
3.2 分区图的函数
4.0 绘制箭头
5.0 直方图
6.0 拖拽的应用（Drag）
6.1 缩放的应用（Zoom）
6.2 饼状图的拖拽

文章前标有【D3.js 选择集与数据详解】的文章如下：

1 使用datum()绑定数据
2 使用data()绑定数据
3 绑定数据的顺序
4 enter和exit的处理方法以及处理模板
5 处理模板的应用

很感谢大家在每一篇文章下的留言，我收到了很多建议，也得到了很多鼓励，在这里向大家表示感谢。

文档信息

时间： 2024-12-25 00:51:16

【 D3.js 进阶系列 】 进阶总结的相关文章

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

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

【 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 入门系列 — 0 】 简介和安装

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

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

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

【 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 】 常见可视化图形

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. Layout ,直译为"布局,安排".但在 D3 中不是这个意思. D3 中有很多 Layout 函数,它们不是为了在画面中布局什么,在 D3 中是对输入的数据进行转换,转换成比较容易进行可视化的数据.实际进行可视化时,需要其他的代码.我们可以简单地把 Layout 理解为"制作常见图形的函数",比如饼状图等等. D3 中一共提供了

【 D3.js 高级系列 】 总结

高级系列的教程已经完结,特此总结. 月初的时候曾说过本月内完结高级教程,今天是最后一天,算是可以交差了.O(∩_∩)O~ 如此一来,[入门]-[进阶]-[高级]三个系列的教程算是完成了.本教程的目的在于提供一个网络的.免费的学习系列,希望大家能喜欢. 在写文章的过程中,笔者对于 D3.js 的理解也在逐步加深.因此,写在前面的文章一定比后面的文章要差,虽然部分经过了修改,但是还没有系统性修正的时间.现在三个系列的教程已经完成,接下来会花时间在修正上,尤其是入门系列,这一系列阅读量最大,但是问题也

【 D3.js 高级系列 — 4.0 】 矩阵树图

矩阵树图(Treemap),也是层级布局的扩展,根据数据将区域划分为矩形的集合.矩形的大小和颜色,都是数据的反映. 许多门户网站都能见到类似图1,将照片以不同大小的矩形排列的情形,这正是矩阵树图的应用. 图1  http://www.texastribune.org/2010/10/07/treemap-reveals-campaign-ad-trends/ 现以浙江.广西.江苏三省份2013年的GDP作为数据,以GDP大小作为节点的权重将其制作成矩阵树图. 1. 数据 新建一个citygdp.