數據可視化(7)--D3基礎

一直想寫寫D3，覺得D3真心比較強大，基本上你能想出來的圖表都能繪制出來，只不過使用起來比前幾個要稍麻煩一點。

正好最近讀完了《數據可視化實戰》，將關於D3的知識梳理了一遍，寫這篇博客記錄一下。

D3 是一個縮寫，它的全稱叫Data-Driven Documents（數據驅動的文檔）。D3是基於數據操作文檔的JavaScript庫。D3幫助你使用HTML，SVG和CSS生動的展現數據。D3不需要將你使用某個特定的框架，D3重點在於對主流瀏覽器的全兼容，同時結合了強大的虛擬化組件，以數據驅動的方式去操作DOM。

D3支持所謂的主流瀏覽器除了IE8及以前的版本。D3測試了火狐，Chrome、Safari、Opera和IE9。D3的大部分組件可以在舊的瀏覽器運行，D3核心庫的最低運行要求：支持JavaScript和W3C DOM API.對於IE8，建議使用兼容性庫Aight庫.D3采用的是Selectors API的第一級標准，你要是考慮兼容性可以預加載Sizzle庫。你得使用主流的瀏覽器以便可以支持SVG和CSS3的轉場特效。

官網地址：http://d3js.org/

下載官方包 d3.v3.zip 或者添加如下代碼：

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

數據

var dataset = [1,2,3,4,5];
d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text("New paragraph!");

結果如下圖

詳細的解釋

d3.select("body")
　　選擇DOM 中的body 元素，把它交給連綴方法中的下一個方法。
.selectAll("p")
　　選擇DOM 中的所有段落。因為還沒有段落，所以返回空元素。可以認為這個空元素代表馬上就會創建的段落。
.data(dataset)
　　解析並數出數據值。dataset 數組中有5 個值，因而此后的所有方法都將執行五遍，每次針對一個值。
.enter()
　　要創建新的綁定數據的元素，必須使用enter()。這個方法會分析當前選擇的DOM 元素和傳給它的數據，如果數據值比對應的DOM 元素多，就創建一個新的占位元素。然后把這個新占位元素的引用交給鏈中的下一個方法。
.append("p")
　　取得由enter() 創建的空占位元素，並把一個p 元素追加到相應的DOM 中。然后它再把自己剛創建的元素交給鏈中的下一個方法。
.text("New paragraph!")
　　取得新創建的p 元素，插入文本值。

將最后一行修改為

.text(function(d) { return d; });

結果如下

我們用數據填充了每個段落，機關都在data() 方法里。在連綴方法中，只要調用data() 了，就可以隨時創建一個接收d 為輸入的匿名函數。與當前元素對應，方法data() 確保了每個d 都會被賦予原始數據集中的一個值。隨着D3 遍歷每個元素，“當前元素”的這個值也會跟着變化。比如，循環到第三次時，代碼會創建第三個p 元素，而d 就會被賦予數據集中的第三個值（即dataset[2]）。於是，第三個段落的文本就是“15”。

SVG繪制

首先要創建一個SVG 元素，以便在其中保存所有圖形，先找到文檔的body 元素，然后在結束的</body> 標簽前添加一個新的svg 元素，並設置長寬，代碼如下

var svg = d3.select("body")
    .append("svg")
    .attr("width", 500)
    .attr("height", 50);

添加一些數據

var dataset = [ 5, 10, 15, 20, 25 ];

使用data() 迭代每個數據點，為它們分別創建一個圓形

var circles = svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle");

最后設置圖形的樣式

circles.attr("cx", function(d, i) {
        return (i * 50) + 25;
    })//設置x的位置
    .attr("cy", 50 / 2)//設置y的位置
    .attr("r", function(d) {
        return d;
    })//設置圓的半徑
    .attr("fill", "yellow")//設置填充顏色
    .attr("stroke", "orange")//設置圓的邊緣線顏色
    .attr("stroke-width", function(d) {
        return d / 2;
    });//設置圓的邊緣線的寬度

 

結果如下圖

比例尺

“比例尺是一組把輸入域映射為輸出范圍的函數。”

先創建比例尺，設定值域為100~500和實際范圍10~350，代碼如下

var scale = d3.scale.linear()
    .domain([100, 500])
    .range([10, 350]);

可以測試一下scale

scale(100); // 返回10
scale(300); // 返回180
scale(500); // 返回350

添加數據集

var dataset = [
　　　　　　　　　　[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
　　　　　　　　　　[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
　　　　　　　　];

可以根據d3的max()和min()方法創建一個動態映射軸值的比例尺函數，max() 函數只是簡單地循環數組中的每個值，然后找出其中最大的那個。min()則是找出其中最小的那個。

定義比例尺函數，其中w是svg寬，h是svg高。

var w = 500;
var h = 100;

var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[0]; })])
    .range([0, w]);
var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([0, h]);

 

使用比例尺函數處理數據，並到svg中顯示

svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return d[0];
    })
    .attr("cy", function(d) {
        return d[1];
    })
    .attr("r", function(d) {
        return Math.sqrt(h - d[1]);
    });

 

效果如下

 

d3.scale.linear() 還有幾個非常方便的方法。
nice()
告訴比例尺取得為range() 設置的任何值域，把兩端的值擴展到最接近的整數。根據D3 的維基：“比如，值域[0.20147987687960267, 0.996679553296417]的優化值域為[0.2, 1]。”這個方法對正常人都有用，因為人不是計算機，看到0.20147987687960267 這樣的數你一定會頭大。
rangeRound()
用rangeRound() 代替range() 后，則比例尺輸出的所有值都會舍入到最接近的整數值。對輸出值取整有利於圖形對應精確的像素值，避免邊緣出現模糊不清的鋸齒。
clamp()
默認情況下，線性比例尺可以返回指定范圍之外的值。例如，假如給定的值位於輸入值域之外，那么比例尺也會返回一個位於輸出范圍之外的值。不過，在比例尺上調用clamp(true) 后，就可以強制所有輸出值都位於指定的范圍內。這意味着超出范圍的值，會被取整到范圍的最低值或最高值（總之是最接近的那個值）。

 

除了線性（linear）比例尺，D3 還內置了另外幾個比例尺方法。
sqrt
平方根比例尺。
pow
冪比例尺，適合值以指數級變化的數據集。
log
對數比例尺。

quantize
輸出范圍為獨立的值的線性比例尺，適合想把數據分類的情形。
quantile
與quantize 類似，但輸入值域是獨立的值，適合已經對數據分類的情形。
ordinal
使用非定量值（如類名）作為輸出的序數比例尺，非常適合比較蘋果和桔子。
d3.scale.category10()、d3.scale.category20()、d3.scale.category20b() 和d3.scale.category20c()
能夠輸出10 到20 種類別顏色的預設序數比例尺，非常方便。
d3.time.scale()
針對日期和時間值的一個比例尺方法，可以對日期刻度作特殊處理。

 

數軸

接着上面的例子進行，創建數軸

var xAxis = d3.svg.axis()//創建通用的數軸函數
    .scale(xScale)//基於xScale比例尺工作
    .orient("bottom");//設置標簽相對數軸顯示在什么地方。默認位置是底部。

 

在SVG 中生成數軸，放在腳本底部，以便在SVG 中的其他元素都生成之后再生成數軸，這樣數軸就可以出現在“上面”了。

svg.append("g")
　　.attr("class", "axis") // 指定"axis" 類
　　.call(xAxis);

 

效果如下

略難看，而且x軸的位置也不對。

修整一下數軸，在<head> 中的<style> 標簽里寫兩條CSS 樣式規則。

.axis path, .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

 

 用到SVG 變換（transform）了。添加一行代碼，把整個數軸分組平移到圖表下方，詳細如下

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - 20) + ")")
    .call(xAxis);

 

 效果如下

然后添加Y軸，做一些調整，最后JS文件如下

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
var dataset = [
    [ 5, 20 ],
    [ 480, 90 ],
    [ 250, 50 ],
    [ 100, 33 ],
    [ 330, 95 ],
    [ 410, 12 ],
    [ 475, 44 ],
    [ 25, 67 ],
    [ 85, 21 ],
    [ 220, 88 ]
];
var x = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[0]; })])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([height, 0]);

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

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

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


svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return x(d[0]);
    })
    .attr("cy", function(d) {
        return y(d[1]);
    })
    .attr("r", function(d) {
        return 10;
    });
svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("X軸");

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Y軸");

最終效果如下

D3的基礎今天就到這里~~

有時間的話，推薦讀一下《數據可視化實戰》~~