D3 数据可视化 - 进阶系列
文章平均质量分 79
大数据时代下数据可视化是必不可少的领域。D3 是当前流行的数据可视化开发工具。本专栏供想要进一步学习 D3 的读者使用。
DecemberCafe
这个作者很懒,什么都没留下…
展开
-
【 D3.js 进阶系列 】 进阶总结
进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下。原创 2015-02-18 09:42:23 · 4831 阅读 · 0 评论 -
【 D3.js 选择集与数据详解 — 5 】 处理模板的应用
在【选择集与数据 - 4】一文中,介绍了一个update、enter、exit的处理模板,这个模板很常用,本文将通过一个例子来讲解其使用方法。原创 2015-02-07 13:32:12 · 4071 阅读 · 0 评论 -
【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板
绑定数据之后,选择集分为三部分:update、enter、exit。这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板。1. enter的处理方法如果没有足够的元素,那么处理方法通常是使用append()添加元素。请看下面的代码: var dataset = [3, 6, 9]; var p = d3.select("body").selectAll("原创 2015-01-27 22:04:11 · 3868 阅读 · 0 评论 -
【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序
data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序。在数据需要更新的时候常常会用到。原创 2015-01-17 19:30:39 · 4472 阅读 · 0 评论 -
【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据
D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢?原创 2015-01-17 19:22:06 · 4804 阅读 · 0 评论 -
【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据
选择集和数据的关系是 D3 最重要的基础,在【入门 - 第 7 章】时进行过些许讲解,对于要掌握好 D3 是远远不够的。故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理,update 、enter、exit 的原理和使用方法等,接下来一段时间里会有多篇此类文章。原创 2015-01-12 15:16:59 · 10149 阅读 · 1 评论 -
【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽
本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分。原创 2015-01-06 13:06:29 · 7446 阅读 · 2 评论 -
【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)
缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行。原创 2014-12-28 21:04:51 · 25349 阅读 · 4 评论 -
【 D3.js 进阶系列 — 6.0 】 拖拽的应用(Drag)
拖拽(Drag)是交互式中很重要的一种,本文将讲解拖拽的使用方法。原创 2014-12-27 22:39:18 · 16689 阅读 · 0 评论 -
【 D3.js 进阶系列 — 5.0 】 直方图
直方图用于描述概率分布,D3 提供了直方图的布局 Histogram 用于转换数据。原创 2014-12-17 15:19:47 · 8825 阅读 · 1 评论 -
【 D3.js 进阶系列 — 4.0 】 绘制箭头
在 SVG 绘制区域中作图,在绘制直线和曲线时,常需要在某处添加箭头。本文介绍如何在 D3 中给直线和曲线添加箭头。 到目前为止,我们绘制 D3 的图表都是在 SVG 绘制区域内,虽然 D3 也可用 Canvas 或 WebGL 等作图,但 SVG 是最常用的。那么,用 D3 来绘制箭头,先要明白在 SVG 中是怎么绘制的。1. 在 SVG 中定义箭头的标识定义箭头的标识如下,先写一对 ,里面再原创 2014-12-08 20:19:20 · 31283 阅读 · 0 评论 -
【 D3.js 进阶系列 — 3.2 】 分区图的函数
分区图的布局比较简单,本章介绍一下分区图的参数。分区图布局为:d3.layout.partition()其函数有6个。nodes()将根数据传入后,得到的节点的数组,每个节点添加8个参数:parent - 父节点children - 子节点value - 表示节点的大小,由下面 value() 函数指定的值,父节点的值等于子节点值的和depth - 节点的深度x - 节点的x方向的坐标(不一定指x原创 2014-12-07 16:19:07 · 4108 阅读 · 0 评论 -
【 D3.js 进阶系列 — 3.1 】 圆形分区图
分区图布局的 size 函数很有意思,即可用于制作矩形分区图,也可用于制作圆形分区图。本文就来谈讨一下圆形分区图的制作。原创 2014-11-30 19:44:44 · 14524 阅读 · 1 评论 -
【 D3.js 进阶系列 — 3.0 】 分区图
分区图( Partition ),也是 D3 的一个布局( Layout )。这个布局很有意思,可以做成方形也可能做成圆形,本文先介绍方形分区图的制作方法,这也是分区图最基本的形式。原创 2014-11-23 18:58:53 · 7308 阅读 · 1 评论 -
【 D3.js 进阶系列 — 2.2 】 力学图的参数
力学图的布局中有很多参数,本文将逐个说明。D3 中的力学图布局是使用韦尔莱积分法计算的,这是一种用于求解牛顿运动方程的数值方法,被广泛应用于分子动力学模拟以及视频游戏中。定义布局的代码如下:var force = d3.layout.force()即可,D3 中提供了 17 个函数用于设定其参数和事件,在所有布局中是最多的,下面将对其进行说明。size()用于设定力学图的作用范围,使用方法为 fo原创 2014-11-15 10:19:54 · 10423 阅读 · 11 评论 -
【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定
本章讨论在力学图中常用到的事件( Event ),然后对【进阶 - 第 2.0 章】的人物关系图进行改进,使用户能够固定拖拽的对象。原创 2014-11-08 10:55:26 · 15567 阅读 · 8 评论 -
【 D3.js 进阶系列 — 2.0 】 力学图 + 人物关系图
力学图(力导向图)与生活中常见的人物关系图结合,是比较有趣的。本文将以此为凭,阐述在力学图中如何插入外部图片和文字。原创 2014-10-25 10:26:57 · 48692 阅读 · 5 评论 -
【 D3.js 进阶系列 — 1.2 】 读取 CSV 文件时乱码的解决方法
在 D3 中使用 d3.csv 读取 CSV 文件时,有时会出现乱码问题。怎么解决呢?原创 2014-10-18 15:45:35 · 12711 阅读 · 0 评论 -
【 D3.js 进阶系列 — 1.1 】 其他表格文件的读取
CSV 表格文件是以逗号作为单元分隔符的,其他还有以制表符 Tab 作为单元分隔符的 TSV 文件,还有人为定义的其它分隔符的表格文件。本文将说明在 D3 中如何读取它们。原创 2014-10-08 10:37:48 · 7097 阅读 · 1 评论 -
【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取
在入门系列的教程中,我们常用 d3.json() 函数来读取 json 格式的文件。json 格式很强大,但对于普通用户可能不太适合,普通用户更喜欢的是用 Microsoft Excel 或 OpenOffice Calc 等生成的表格文件,因为简单易懂,容易编辑。原创 2014-10-03 15:01:31 · 31572 阅读 · 6 评论