D3入門總結

基礎API

選擇元素

d3.select()

選擇所有指定元素的第一個

d3.selectAll()

選擇指定元素的全部

綁定元素

data()

綁定一個數組到選擇集上，數組的各項值分別與選擇集的各元素綁定

dataum()

綁定一個數據到選擇集上

function(d, i){ }

當選擇集需要使用被綁定的數據時，常需要使用匿名函數。其包含兩個參數，其中：
d 代表數據，也就是與某元素綁定的數據
i 代表索引，代表數據的索引號，從 0 開始

插入元素

append()

在選擇集末尾插入元素

insert()

在選擇集前面插入元素

刪除元素

remove()

添加畫布

var svg = d3.select("body")     //選擇文檔中的body元素
            .append("svg")  //添加一個svg元素
            .attr("width", 300)  //設定寬度
            .attr("height", 300); //設定高度

繪製矩形

var dataset = [ 250 , 210 , 170 , 130 , 90 ]; 
svg.selectAll("rect")   //選擇svg內所有的矩形
   .data(dataset)  //綁定數組
   .enter()        //指定選擇集的enter部分
   .append("rect") //添加足夠數量的矩形元素

有數據，而沒有足夠圖形元素的時候，使用此方法可以添加足夠的元素。

矩形的屬性，常用的有四個：

• x - 矩形左上角的 x 座標
• y - 矩形左上角的 y 座標
• width - 矩形的寬度
• height - 矩形的高度

注意，在 SVG 中，x 軸的正方向是水平向右，y 軸的正方向是垂直向下的。

比例尺縮放

d3.scale.linear()

返回一個線性比例尺

domain()
range()   

設定比例尺的定義域和值域

d3.max()
d3.min()

求數組的最大值和最小值

線性比例尺

var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
var min = d3.min(dataset);
var max = d3.max(dataset);

var linear = d3.scale.linear()
               .domain([min, max])
               .range([0, 300]);

linear(0.9);    //返回 0
linear(2.3);    //返回 175
linear(3.3);    //返回 300

上面的方法將dataset中最小的值，映射成0；將最大的值，映射成 300。

d3.scale.linear() 的返回值，是可以當做函數來使用的。因此，有這樣的用法：linear(2.3)，返回175。

序數比例尺

var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];

var ordinal = d3.scale.ordinal()
                .domain(index)
                .range(color);

ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black

定義座標軸

d3.svg.axis()

D3 中座標軸的組件，能夠在 SVG 中生成組成座標軸的元素。

要生成座標軸，需要用到比例尺，它們二者經常是一起使用的。

var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
//定義比例尺
var linear = d3.scale.linear()
      .domain([0, d3.max(dataset)])
      .range([0, 250]);
//定義座標軸
var axis = d3.svg.axis()
             .scale(linear)     //指定比例尺
             .orient("bottom")  //指定刻度的方向
             .ticks(7);          //指定刻度的數量

• scale()：指定比例尺。
• orient()：指定刻度的朝向，bottom 表示在座標軸的下方顯示。
• ticks()：指定刻度的數量。

定義了座標軸之後，只需要在 SVG 中添加一個分組元素 ，再將座標軸的其他元素添加到這個 裏即可

svg.append("g").call(axis);

在 D3 中，call() 的參數是一個函數,調用之後，將當前的選擇集作爲參數傳遞給此函數

完整的柱形圖

添加 SVG 畫布

var width = 400;
var height = 400;
var padding = {left:30, right:30, top:20, bottom:20};
//在 body 裏添加一個 SVG 畫布   
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

定義數據和比例尺

var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
//x軸的比例尺
var xScale = d3.scale.ordinal()
    .domain(d3.range(dataset.length))
    .rangeRoundBands([0, width - padding.left - padding.right]);
//y軸的比例尺
var yScale = d3.scale.linear()
    .domain([0,d3.max(dataset)])
    .range([height - padding.top - padding.bottom, 0]);

定義座標軸

//定義x軸
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

//定義y軸
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

添加矩形和文字元素

//矩形之間的空白
var rectPadding = 4;

//添加矩形元素
var rects = svg.selectAll(".MyRect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","MyRect")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("width", xScale.rangeBand() - rectPadding )
        .attr("height", function(d){
            return height - padding.top - padding.bottom - yScale(d);
        });

//添加文字元素
var texts = svg.selectAll(".MyText")
        .data(dataset)
        .enter()
        .append("text")
        .attr("class","MyText")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("dx",function(){
            return (xScale.rangeBand() - rectPadding)/2;
        })
        .attr("dy",function(d){
            return 20;
        })
        .text(function(d){
            return d;
        });

添加座標軸的元素

//添加x軸
svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
  .call(xAxis); 

//添加y軸
svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(" + padding.left + "," + padding.top + ")")
  .call(yAxis);

過渡效果

transition()

啓動過渡效果。

其前後是圖形變化前後的狀態（形狀、位置、顏色等等）

duration()

指定過渡的持續時間，單位爲毫秒。

ease()

指定過渡的方式，常用的有：

• linear：普通的線性變化
• circle：慢慢地到達變換的最終狀態
• elastic：帶有彈跳的到達最終狀態
• bounce：在最終狀態處彈跳幾次

delay()

指定延遲的時間，表示一定時間後纔開始轉變，單位同樣爲毫秒。此函數可以對整體指定延遲，也可以對個別指定延遲。

Update、Enter、Exit

如果數組爲 [3, 6, 9, 12, 15]，將此數組綁定到3個 p 元素的選擇集上。可以想象，會有兩個數據沒有元素與之對應，這時候 D3 會建立兩個空的元素與數據對應，這一部分就稱爲 Enter。而有元素與數據對應的部分稱爲 Update。

如果數組爲 [3]，則會有兩個元素沒有數據綁定，那麼沒有數據綁定的部分被稱爲 Exit。

• update 部分的處理辦法一般是：更新屬性值
• enter 部分的處理辦法一般是：添加元素後，賦予屬性值
• exit 部分的處理辦法一般是：刪除元素（remove）