d3.js（Data-Driven Documents）数据可视化-----初步学习

1.   d3.js 是一个将数据转化为图表的javascript库。效果如如下：     

script src="http://d3js.org/d3.v3.min.js" charset="utf-8">

也可自行去官网下载至本地。

2.完整代码如下

3.  附：相关测试数据，如果读取文件的时候提示404 not found，就是由于没找到对应的文件

date,close,link
30-Apr-12,53.98,http://bl.ocks.org/d3noob/11313583
27-Apr-12,67.00,http://bl.ocks.org/d3noob/11306153
26-Apr-12,89.70,http://bl.ocks.org/d3noob/11137963
25-Apr-12,99.00,http://bl.ocks.org/d3noob/10633856
24-Apr-12,130.28,http://bl.ocks.org/d3noob/10633704
23-Apr-12,166.70,http://bl.ocks.org/d3noob/10633421
20-Apr-12,234.98,http://bl.ocks.org/d3noob/10633192
19-Apr-12,345.44,http://bl.ocks.org/d3noob/10632804
18-Apr-12,443.34,http://bl.ocks.org/d3noob/9692795
17-Apr-12,543.70,http://bl.ocks.org/d3noob/9267535
16-Apr-12,580.13,http://bl.ocks.org/d3noob/9211665
13-Apr-12,605.23,http://bl.ocks.org/d3noob/9167301
12-Apr-12,622.77,http://bl.ocks.org/d3noob/8603837
11-Apr-12,626.20,http://bl.ocks.org/d3noob/8375092
10-Apr-12,628.44,http://bl.ocks.org/d3noob/8329447
9-Apr-12,636.23,http://bl.ocks.org/d3noob/8329404
5-Apr-12,633.68,http://bl.ocks.org/d3noob/8150631
4-Apr-12,624.31,http://bl.ocks.org/d3noob/8273682
3-Apr-12,629.32,http://bl.ocks.org/d3noob/7845954
2-Apr-12,618.63,http://bl.ocks.org/d3noob/6584483
1-Apr-12,599.55,http://bl.ocks.org/d3noob/5893649

4.  详细注解：

   此页面可分为两部分： css 和  javascript

  css 用于控制图表的样式， javascript用于图表的定义

 

d3.csv("data/data.tsv", function(data){
        data.forEach(function(d){
            d.date = parseDate(d.date);
            d.close = +d.close;
        });……

  data.tsv 这个文件的扩展名并不重要，txt，csv，tsv，json都可；重要的是其中的内容是何种格式，比如上面的测试数据就是csv格式的，故d3.js只能用d3.csv来解析

  其他任何方式都是错误的。

  关于数据格式详细介绍，请查看d3.js文档

  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;

• 设置横轴方向和纵轴方向的区域（Domains）和范围（Ranges）

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

• 为line()画线函数添加数据

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 + ")"
);

d3.select(“body”)选择body元素，然后在body里面增加一个子元素”svg”,给这个svg设定一些属性，再往“svg”中添加一个”g”元素并设定一些属性