从今天开始我将和大家一起学习D3.js（Data-Driven Documents），由于国内关于D3的学习资料少之又少，所以我觉得很有必要把自己学习过程记录下来，供同学们参考，如果文章有有哪些表达有错误的还希望同学们帮我指出来。当然了， 可以的话我希望大家都可以去看看英文资料（文章后面将列英文资源），毕竟那才是原汁原味的D3。 好了， 废话到此，下面我们开始我们的学习之旅吧！

什么是D3.js?

一句话：D3.js是一个操纵数据的javascript库！

从一个简单的例子开始

学习一个新的东西其实很简单，我们先来一个效果图，然后我们再一条条改它的语句，对比呈现的效果来学习这条属性的作用，好了，下面就是我们要做的：

看上去是不是挺复杂的呢？下面我们来看看他的源码到底是怎样的呢？

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Simple Graph</title>

    <style type = "text/css">

    body{ font: 12px Arial;}

    path{

        stroke: steelblue;

        stroke-width: 2;

        fill: none;

    }

    .axis path,

    .axis line{

        fill: none;

        stroke: grey;

        stroke-width: 1;

        shape-rendering: crispEdges;

    }

    </style>

    <script type="text/javascript" src="script/d3.v3.js"></script>

</head>

<body>

    <script type="text/javascript">

    var margin = {top:30, right:20, bottom: 30, left: 50};

    width = 600 - margin.left -margin.right;

    height = 270 - margin.top - margin.bottom;

    var parseDate = d3.time.format("%d-%b-%y").parse;

    var x = d3.time.scale().range([0, width]);

    var y = d3.scale.linear().range([height, 0]);

    var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5);

    var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);

    //?

    var valueline = d3.svg.line()

        .x(function(d){return x(d.date);})

        .y(function(d){return y(d.close);});

    var svg = d3.select("body")

        .append("svg")

            .attr("width", width + margin.left + margin.right)

            .attr("height", height + margin.top + margin.bottom)

        .append("g")

            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    //Get the data

    d3.tsv("data/data.tsv", function(error, data){

        data.forEach(function(d){

            d.date = parseDate(d.date);

            d.close = +d.close;

        });

        //Scale(规模) the range of the data

        x.domain(d3.extent(data, function(d){

            return d.date;

        }));

        y.domain([0, d3.max(data, function(d){

            return d.close;

        })]);

        //Add the valueline path

        svg.append("path")

            .attr("d", valueline(data));

        //Add the X Axis

        svg.append("g")

            .attr("class", "x axis")

            .attr("transform", "translate(0," + height + ")")

            .call(xAxis);

        //Add the Y Axis

        svg.append("g")

            .attr("class", "y axis")

            .call(yAxis);

    });

    </script>

</body>

</html>

看上去是不是很复杂的样子，不要怕，下面我们对他进行一块一块的解剖

HTML

上面的代码包括样式和脚本两个部分，他的结构可以简化为：

<!DOCTYPE html>

<meta charset="utf-8">

<style>

    The CSS 部分

</style>

<body>

<script type="text/javascript" src="d3/d3.v3.js"></script>

<script>

    The D3 JavaScript code is here

</script>

</body>

CSS

css部分主要是对元素设定样式，上面图表的CSS样式为

body{ font: 12px Arial;}

path{

    stroke: steelblue;

    stroke-width:;

    fill: none;

}

.axis path,

.axis line{

    fill: none;

    stroke: grey;

    stroke-width:;

    shape-rendering: crispEdges;

}

我们可以改变其中的样式来改变图表的显示效果，比方说设置path{ stroke: red ; …}则效果曲线将变成红色

同样的，如果我更改fill为red,我们将得到红色的填充

其中"shape-rendering”是形状渲染属性，他一共有四个属性，值为“crispEdges”表示该形状将平滑显示。跟多的属性请同学学习SVG教程。

D3 JavaScript

  • 设置边距和图表大小。 我们设定画布的大小为：width:600,height:270，用一个margin对象来存储图表的边距信息，计算出图表的宽度和高度

    var margin = {top: 30, right: 20, bottom: 30, left: 50},
    
width = 600 - margin.left - margin.right,
    
height = 270 - margin.top - margin.bottom;
  • 下面我们先来看获取数据的方法
    //Get the data
    
    d3.tsv("data/data.tsv", function(error, data){
    
        data.forEach(function(d){
    
            d.date = parseDate(d.date);
    
            d.close = +d.close;
    
        });
 这里我们是从data.tsv这个文件中获取数据的，所谓tsv文件，简单来说就是用tab空格把数据分割开来的一种数据格式，比方说我们的data.tsv文件的部分数据就是这样的
date    close

1-May-12    58.13

30-Apr-12    53.98

27-Apr-12    67.00
当然了，D3允许导入的数据不仅仅只是这一种文件格式，他支持的数据格式可以为：

text: A plain old piece of text that has options to be encoded in a particular way

json: This is the afore mentioned JavaScript Object Notation.
xml: Extensible Markup Language is a language that is widely used for encoding documents in a human readable forrm.
html: HyperText Markup Language is the language used for displaying web pages.
csv: Comma Separated Values is a widely used format for storing data where plain text
information is separated by (wait for it) commas.
tsv: Tab Separated Values is a widely used format for storing data where plain text
information is separated by a tab-stop character.

data.forEach(function(d){

上面这一行代码可以看做把数据分成了一行一行的形式，其中，每一行当中都有一个date和close值，并对没一行数据执行下面的处理：

d.date = parseDate(d.date); --将d.date数据用前面定义的parseDate方法来格式化，将结果返回给d.date

d.close = +d.close; --将d.close转化为一个数字

var parseDate = d3.time.format("%d-%b-%y").parse;
format()的格式有很多，我们可以根据自己的需要来设定自己的个格式，当然这里的格式要与文档数据中的格式对应哦，不过现在我遇到的问题是，如何让时间显示为中文？如果有同学知道，请告诉我，我将非常感谢!
  • 设置横轴方向和纵轴方向的区域（Domains）和范围（Ranges）
var x = d3.time.scale().range([0, width]);

var y = d3.scale.linear().range([height, 0]);
这段代码是为了让我们导入的数据与图表的大小相适应，range知道是图表范围的大小，他是一个尺寸大小。这段代码告诉D3我们要画些东西在x轴上，这些东西是时间/日期的一个实体。
x.domain(d3.extent(data, function(d) { return d.date; }));

y.domain([0, d3.max(data, function(d) { return d.close; })]);
而domain指的是数据的区域，extent返回的是最小的date到最大的date这样一个跨度，所以，最小的date就对应于上面range的最小值0，我们可以用一幅图来形象的表达：


 
  • 设置坐标轴
下面我们来分析这里几行代码：
var xAxis = d3.svg.axis().scale(x)

.orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)

.orient("left").ticks(5);
坐标轴axis初始化方法通过d3.svg.axis()来调用，然后调用.scale(x)用前面定义的x来给坐标轴设定刻度， .orient()设定刻度相对坐标轴的位置，.ticks()告诉D3在坐标轴上设定差不多几个刻度就够了，比方说你要D3给你的X轴设定大概10个刻度:var xAxis = d3.svg.axis().scale(x).orient(“bottom”).ticks(10)，效果如下
  • 为line()画线函数添加数据
var valueline = d3.svg.line()

.x(function(d) { return x(d.date); })

.y(function(d) { return y(d.close); });
关于Line函数的使用可以参照这里
  • 添加画布
var svg = d3.select("body")

.append("svg")

    .attr("width", width + margin.left + margin.right)

    .attr("height", height + margin.top + margin.bottom)

.append("g")

    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"

);
d3.select(“body”)选择body元素，然后在body里面增加一个子元素”svg”,给这个svg设定一些属性，再往“svg”中添加一个”g”元素并设定一些属性。
 
  • 开始画东西啦
svg.append("path") // Add the valueline path.

    .attr("d", valueline(data));
我们再刚才创建的svg中添加一个path路径,让后用前面的定义的 valueline来绘制一条路径。然后我们再来绘制x轴和y轴
svg.append("g") // Add the X Axis

    .attr("class", "x axis")

    .attr("transform", "translate(0," + height + ")")

    .call(xAxis);

svg.append("g") // Add the Y Axis

    .attr("class", "y axis")

    .call(yAxis);
两个部分最后的.call()函数来定义前面的坐标轴初始化的方法来绘制坐标轴。

OK！，到目前为止我们的目标已经达到了，最开始要达到的效果我们已经实现，但是还有很多东西我们还没有学会，比方说坐标轴的标签？ 好吧，下一节我们再来给坐标轴添加标签！

 

相关资料：

http://d3js.org/
http://bost.ocks.org/mike/
https://github.com/mbostock/d3/wiki
https://groups.google.com/forum/?fromgroups#!forum/d3-js
http://stackoverflow.com/questions/tagged/d3.js
https://github.com/mbostock/d3/wiki/Gallery

D3.js学习（一）的更多相关文章

  1. 数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总

    习·D3.js 学习资源汇总 除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github ...

  2. D3.js学习记录【转】【新】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. D3.js学习笔记（六）——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  4. d3.js学习笔记（五）——将数据结构化为D3.js可处理的

    目标 在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js. 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优 ...

  5. D3.js学习笔记（一）——DOM上的数据绑定

    开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...

  6. D3.js学习（七）

    上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...

  7. D3.js学习记录

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. D3.js学习笔记（四）—— 使用SVG坐标空间

    目标 在这一章,你将要使用D3.js基于一些数据把SVG元素添加到你想要的坐标位置上. 我们的目标就是使用下面的数据集: var spaceCircles = [30,70,110]; 并使用D3.j ...

  9. D3.js学习笔记（三）——创建基于数据的SVG元素

    目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...

随机推荐

  1. JCIP chap3 share objects

    "同步"确保了操作的原子性执行,但它还有其它重要的方面:memory visibility.我们不但要确保当一个线程在使用一个对象的时候,其它线程不能修改这个对象,而且还要保证该线 ...

  2. [No000095].Net入门级逆向工程-1.SpreadsheetGear汉化

    一.SpreadsheetGear汉化 最近,我们的有个项目要用到表格功能,由于历(la)史(ji)遗(kuang)留(jia)的问题,我们不得不用第三方的一个插件SpreadsheetGear来实现 ...

  3. xml解析

    config.xml <?xml version="1.0" encoding="UTF-8"?> <prize> <gift&g ...

  4. js 批量设置css样式

    在js中更换样式比较常见,但是批量设置比较少遇见: 但是在做就是插件时,不想额外的添加css文件(需要导入,还可能引起冲突),能批量设置就比较方便了. 以下代码是来自网上的三种方法,使用第二种最方便了 ...

  5. CPU中断和轮询

    轮询顾名思义,CPU不停的询问,CPU很忙. 中断和轮询不同,是硬件上的,就像一个开关被按下了,没有什么东西在不停的询问开关有没有被按下,开关只是被按下了,就通电了,通电了就会发声一些事情. 可以看看 ...

  6. [LeetCode] Word Squares 单词平方

    Given a set of words (without duplicates), find all word squares you can build from them. A sequence ...

  7. 用vue.js学习es6（二）：let和const使用

    一.运行及关闭运行: 在上一节中我们用shift+右击在C:\vue\es6文件夹中打开命令行使用:npm run dev,打开了我们的vue界面. 如果要关闭则在命令行中按住ctrl+C则可以关闭. ...

  8. 日货EmEditor的使用小技巧

    1.查看->大纲向导,可层级显示HTML 2.工具->插件->资源管理器,可在左侧显示资源管理器 3.工具->插件->单词自动完成,可实现单词智能提示功能

  9. ORB-SLAM（六）回环检测

    上一篇提到,无论在单目.双目还是RGBD中,追踪得到的位姿都是有误差的.随着路径的不断延伸,前面帧的误差会一直传递到后面去,导致最后一帧的位姿在世界坐标系里的误差有可能非常大.除了利用优化方法在局部和 ...

  10. setTimeout和setInterval定时器使用详解测试

    var len=4; while(len--){ var time=setTimeout(function(){ console.log(len); },0); console.log(time); ...