D3 是一個了不起的JS庫，可以制作出交互式的吸引人眼球的圖片。D3 是數據驅動並基於svg,html和css 來繪制圖像。
下面我們使用D3來繪制一個折線圖。
首先
在使用D3之前，我們先下載D3文件，或者你可以通過下面代碼鏈接到最新版本的文件。
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
接下來我們首先繪制折線圖的X軸和Y軸。
我們在這個基本的index.html 上繪制圖形。
<html lang="en">
<head>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
</div>
</div>
</body>
</html>
這些是我們將要描述的簡單的數據：
var data = [{ "sale": "202", "year": "2000" }, { "sale": "215", "year": "2001" }, { "sale": "179", "year": "2002" }, { "sale": "199", "year": "2003" }, { "sale": "134", "year": "2003" }, { "sale": "176", "year": "2010" }];
可縮放矢量圖形（svg）基於XML 可以繪制2D圖形，並且支持交互和動畫。我們使用一個svg元素來繪制我們的折線圖。這個元素在 index.html中。
<svg id="visualisation" width="1000" height="500"></svg>
然后我們來定義長和寬等一些常量，畫圖時會用到。D3提供了一個方法 d3.select 來選擇元素，我們用這個方法來選擇index.html 中的svg 元素。
var vis = d3.select("#visualisation"), WIDTH = 1000, HEIGHT = 500, MARGINS = { top: 20, right: 20, bottom: 20, left: 50 },
基於這些數據，我們要建立X軸和Y軸，我們需要獲取到定義這兩個軸的最大和最小值。
D3 提供了一個叫 d3.scale.linear 的方法，這個方法用來繪制X,Y 軸的刻度，這個方法使用 range 和 domain 屬性來創建刻度。
range 定義了可以用來繪圖的區域，domain 定義了軸上的最大和最小刻度值。下面繪制X軸：
xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([2000,2010]),
range 的值已經在之前被定義出來，使圖像不會在邊緣過於擁擠。最大和最小值則基於之前的數據。
同樣的方式，我們來繪制Y軸：
yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([134,215]),
D3為畫軸提供了一個叫做 d3.svg.axis 的API。接下來，我們用上面定義好的刻度來繪制X,Y軸。
xAxis = d3.svg.axis() .scale(xScale), yAxis = d3.svg.axis() .scale(yScale);
然后我們把畫好的X軸添加到上面的svg容器中。
vis.append("svg:g")
.call(xAxis);
保存上面的代碼，然后在瀏覽器中打開 index.html ，你會看到
這就是X軸，但它還有一些問題。首先，我們需要它在垂直下方的位置上，當我們把X軸添加到svg 容器中時，我們使用translate transform 屬性把它基於坐標向下移動，
由於我們只需把X軸向下移動我們把x軸上的坐標定義為 0，然后y軸的坐標定義為之前的margin。
vis.append("svg:g")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
然后我們用下面的代碼把Y軸添加到svg容器中：
vis.append("svg:g")
.call(yAxis);
保存上面的修改，然后在瀏覽器中打開index.html 你會看到這兩個軸
如你所見，Y軸的位置不正確，我們需要改變它的方向，並把它放在左邊，由於他們已經在左邊對齊，我們使用D3 的 transform 來把它正確的放到X軸的旁邊，我們使用
orient 屬性來改變它的方向。
yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
使用D3 的transform 把Y軸添加到svg 容器中。
vis.append("svg:g")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
我們使垂直方向的值為0， 這樣就能水平的移動它了，保存后在瀏覽器打，你會看到
繪制折線
為了把樣品數據展示在圖中，我們要畫出他們的X，Y軸的坐標然后再畫一條線連接他們，D3 提供了一個API 方法d3.svg.line() 來畫線。所以，添加下面代碼：
var lineGen = d3.svg.line() .x(function(d) { return xScale(d.year); }) .y(function(d) { return yScale(d.sale); });
我們按照之前定義好的X,Y軸的坐標繪制了數據的各個點的坐標。
然后我們在這個svg 上 使用lineGen 方法畫一條線將之前的數據坐標連接起來，我們再為這條線添加一些屬性，比如stroke 線的顏色，stroke-width 線的寬度。
vis.append('svg:path')
.attr('d', lineGen(data))
.attr('stroke', 'green')
.attr('stroke-width', 2)
.attr('fill', 'none');
保存后在瀏覽器打開，你就會看到繪制好的折線圖了
