D3.js学习记录【转】【新】
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.o...
【 D3.js 入门系列 --- 0 】 简介和安装
D3的全称是（Data-DrivenDocuments），顾名思义可以知道是一个关于数据驱动的文档的javascript类库。如果你不知道什么是javascript，请先学习javascript的相关知识。说得简单一点，D3.js主要是用于操作数据的，它通过使用HTML、SVG、CSS来给你的数据注...
【 D3.js 入门系列 — 2.1 】 选择、插入、删除元素
1.select和selectAll的区别在D3中，选择元素的函数有两个：select和selectAll，它们的使用非常重要。先说明一下它们的区别：select是选择所有指定元素的第一个selectAll是选择指定元素的全部（用于同时操作）这两个函数返回的结果称为选择集。来看一个具体的例子，现有如...
【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素
本人的个人博客首页为： http://www.ourd3js.com/ ，csdn博客首页为：http://blog.csdn.net/lzhlzz/。转载请注明出处，谢谢。在D3.js中，选择元素的函数有两个：select和selectAll。先说明一下它们的区别：select是选择所有指定元...
【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld
记得以前刚上大一学C语言的时候，写的第一个程序就是在控制台上输出HelloWorld。当时很纳闷，为什么要输出这个。老师解释说所有学编程入门的第一个程序都是在屏幕上输出HelloWorld，这是惯例。呵呵，想来真是令人怀念。好了，言归正传吧。本文的主要内容也是围绕HelloWorld，不过不是单纯的...
d3.js读书笔记-2
比例尺比例尺基本内容比例尺是一组把输入域映射为输出范围的函数。任意数据集中的值不可能恰好与图表中的像素尺度一一对应。比例尺就是把这些数据值映射为可视化图形中使用的新值的便捷手段。D3的比例尺就是那些你定义的带有参数的函数。定义好之后，就可以调用这些比例尺函数，传入值，它们就能返回按比例生成的输出值。...
【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素
接着上一讲的内容，这次讨论如何选择元素和使用数据。 现在页面中有三行文字，代码为：<p>Hello World 1</p><p>Hello World 2</p><p>Hello World 3</p>定义一个集合set，里面...
【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld
下面开始用D3.js处理第一个简单问题，先看下面的代码：<html><head><meta charset="utf-8"><title>HelloWorld</title></head><body><p>...
D3.js 完整的柱形图
一个完整的柱形图包含三部分：矩形、文字、坐标轴。制作一个实用的柱形图，内容包括：选择集、数据绑定、比例尺、坐标轴等内容。1.添加SVG画布//画布大小varwidth=400;varheight=400;//在body里添加一个SVG画布varsvg=d3.select("body").append...
【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素
在D3.js中，选择元素的函数有两个：select和selectAll。先说明一下它们的区别：select是选择所有指定元素的第一个selectAll是选择指定元素的全部（以用于后面同时操作） 来看一个具体的例子，现有如下代码：<html><head><meta cha...
【 D3.js 高级系列 — 8.0 】 打标
有时，需要在地图上画线。代表“从地方到什么地方”的含义，因此，在连接的映象绘制时。称为“打标”。1.标线是什么标线。是指地图上须要两个坐标以上才干表示的元素。比如，北京和上海之间连线。用于绘制标线的图形元素有两种：线段元素<line>和路径元素<path>。假设是在平面地图上...
【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用
在前面几节中反复出现了如下代码：svg.selectAll("rect").data(dataset).enter().append("rect")当所选择的rect数量比绑定的数据dataset的数量少的时候，通常会用到以上代码，这一节就详细说说当被选择元素和数据数量不一致时该如何处理。这一节将涉...
【 D3.js 入门系列 --- 5 】 如何添加坐标轴
第3节中做了一个图标，但没有为它添加一个相应的坐标轴，这样不知道每一个柱形到底有多长。这一节做一个坐标轴。D3中的坐标轴都是以svg图的形式出现的，这也是为什么在第3节中要使用svg的方法做柱形图的原因。第4节里我们讲解了scale（比例）的用法，在做坐标轴的时候也需要用到比例。第4节中，我们说到s...
【 D3.js 入门系列 --- 3 】 做一个简单的图表！
前面说了几节，都是对文字进行处理，这一节中将用D3.js做一个简单的柱形图。做柱形图有很多种方法，比如用HTML的div标签，或用svg。推荐用SVG来做各种图形。SVG意为可缩放矢量图形（ScalableVectorGraphics），SVG使用XML格式定义图像，不清楚什么是SVG的朋友请先在w...
【 D3.js 入门系列 — 11 】 入门总结
D3新专题首页一转眼，这个入门系列已经积累了二十二篇文章之多，我想作为D3.js这款数据可视化工具的入门来说已经足够了。相信仅仅要看完本系列。以后全然能够在辅以查询的情况下完毕大部分可视化工作。D3.js最早的v1.0版本号是由 MichaelBostock于2011年2月18日公布，其后经过多人的...
【 D3.js 选择集与数据详解 — 5 】 处理模板的应用
在【选择集与数据-4】一文中，介绍了一个update、enter、exit的处理模板，这个模板很常用，本文将通过一个例子来讲解其使用方法。1.模板复习一下上一章提到的模板。//绑定数据后，分别返回update、enter、exit部分varupdate=selection.data(dataset)...
D3.js系列——比例尺和坐标轴
比例尺是D3中很重要的一个概念。绘制图形时直接用数值的大小来代表像素不是一种好方法，本章正是要解决此问题。一、为什么需要比例尺上一章制作了一个柱形图，当时有一个数组，绘图时，直接使用250给矩形的宽度赋值，即矩形的宽度就是250个像素。此方式非常具有局限性，如果数值过大或过小，例如：vardatas...
D3.js坐标轴的绘制方法、添加坐标轴的刻度和各比例尺的坐标轴(V3版本)
坐标轴(Axis) 坐标轴(Axis)在很多图表中都可见到，例如柱形图、折线图、散点图等。坐标轴由一组线段和文字组成，坐标轴上的点由一个坐标值确定。但是，如果使用SVG的直线和文字一笔一画的绘制坐标轴，工作量将会极其的大。D3提供了坐标轴的制作方法，需要之前所给大家讲的比例尺一起使用。开发者仅仅需要...