D3.js可視化前端框架的使用要點(diǎn)

MASAILA 發(fā)布于2019-08-22 14:57 / 3446人閱讀

摘要：該事件不會(huì)區(qū)分字母的大小寫，例如和被視為一致。這些布局的作用都是將某種數(shù)據(jù)轉(zhuǎn)換成另一種數(shù)據(jù)，而轉(zhuǎn)換后的數(shù)據(jù)是利于可視化的。而有元素與數(shù)據(jù)對(duì)應(yīng)的部分稱為。

1.安裝

2.介紹

d3.select()和d3.selectAll();

以上就是D3的選擇集。

以上選擇了數(shù)據(jù)，如何綁定數(shù)據(jù)

提供2個(gè)方法：datum()和data().

datum():是指綁定一個(gè)數(shù)據(jù)到選擇集上。
data():綁定一個(gè)數(shù)組到選擇集上，并且數(shù)組的各項(xiàng)值與選擇集的各項(xiàng)綁定。

元素的選擇還可以通過id 和class去查找

   Pear
   Banana

var p = body.selectAll(".myclass");
p.style("color","red");

元素的插入

append() insert()

   body.append("p")
    .text("append p element");

刪除元素

  var p = body.select("#myid");
  p.remove();

3.畫圖表的要素

畫圖表之前都有一個(gè)前置工作要做，就是所有的東西都是畫在svg上的。

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

比例尺（scale）
比例尺分為2種，一種是線性比例尺，一種是序數(shù)比例尺

先看線性比例尺代碼

  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

線性比例尺提供d3.scale.linear() 返回一個(gè)線性比例尺。其中domain,設(shè)定比例尺的定義域，range設(shè)定比例尺的值域。

其中 d3.min(數(shù)組名稱) d3.max(數(shù)組名稱) 分別是獲得數(shù)組的最小值和最大值。

看序數(shù)比例尺的代碼

 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

序數(shù)比例尺提供的是ordinal方法。d3.scale.ordinal() ;

那么定義完比例尺了，怎么去應(yīng)用呢？

   svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return linear(d);   //在這里用比例尺
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");

坐標(biāo)軸 axis

d3.svg.axis() 定義了一個(gè)坐標(biāo)軸

scale():指定比例尺

orient():指定刻度的朝向

ticks():指定的刻度的數(shù)量

   //數(shù)據(jù)
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);          //指定刻度的數(shù)量
     
     
     svg.append("g")
   .call(axis);

4 圖表的動(dòng)畫

transition() // 啟動(dòng)動(dòng)畫

duration(2000) //動(dòng)畫的持續(xù)時(shí)間

ease(bounce) // 動(dòng)畫類型常用的有l(wèi)inear circle elastic bounce

5.圖表的交互

circle.on("click", function(){
    //在這里添加交互內(nèi)容
});

一般用on加事件處理程序

鼠標(biāo)常用的事件有：

click：鼠標(biāo)單擊某元素時(shí)，相當(dāng)于 mousedown 和 mouseup 組合在一起。
mouseover：光標(biāo)放在某元素上。
mouseout：光標(biāo)從某元素上移出來時(shí)。
mousemove：鼠標(biāo)被移動(dòng)的時(shí)候。
mousedown：鼠標(biāo)按鈕被按下。
mouseup：鼠標(biāo)按鈕被松開。
dblclick：鼠標(biāo)雙擊。
鍵盤常用的事件有三個(gè)：

keydown：當(dāng)用戶按下任意鍵時(shí)觸發(fā)，按住不放會(huì)重復(fù)觸發(fā)此事件。該事件不會(huì)區(qū)分字母的大小寫，例如“A”和“a”被視為一致。
keypress：當(dāng)用戶按下字符鍵（大小寫字母、數(shù)字、加號(hào)、等號(hào)、回車等）時(shí)觸發(fā)，按住不放會(huì)重復(fù)觸發(fā)此事件。該事件區(qū)分字母的大小寫。
keyup：當(dāng)用戶釋放鍵時(shí)觸發(fā)，不區(qū)分字母的大小寫。觸屏常用的事件有三個(gè)：

touchstart：當(dāng)觸摸點(diǎn)被放在觸摸屏上時(shí)。
touchmove：當(dāng)觸摸點(diǎn)在觸摸屏上移動(dòng)時(shí)。
touchend：當(dāng)觸摸點(diǎn)從觸摸屏上拿開時(shí)。當(dāng)某個(gè)事件被監(jiān)聽到時(shí)，D3 會(huì)把當(dāng)前的事件存到 d3.event 對(duì)象，里面保存了當(dāng)前事件的各種參數(shù)，請(qǐng)大家好好參詳。如果需要監(jiān)聽到事件后立刻輸出該事件，可以添加一行代碼：

6. 圖表的布局

布局是幫你完成了數(shù)據(jù)轉(zhuǎn)換，不是幫你完成了畫圖

D3 總共提供了 12 個(gè)布局：餅狀圖（Pie）、力導(dǎo)向圖（Force）、弦圖（Chord）、樹狀圖（Tree）、集群圖（Cluster）、捆圖（Bundle）、打包圖（Pack）、直方圖（Histogram）、分區(qū)圖（Partition）、堆棧圖（Stack）、矩陣樹圖（Treemap）、層級(jí)圖（Hierarchy）。

12 個(gè)布局中，層級(jí)圖（Hierarchy）不能直接使用。集群圖、打包圖、分區(qū)圖、樹狀圖、矩陣樹圖是由層級(jí)圖擴(kuò)展來的。如此一來，能夠使用的布局是 11 個(gè)（有 5 個(gè)是由層級(jí)圖擴(kuò)展而來）。這些布局的作用都是將某種數(shù)據(jù)轉(zhuǎn)換成另一種數(shù)據(jù)，而轉(zhuǎn)換后的數(shù)據(jù)是利于可視化的。

具體看官網(wǎng)

7.理解update。enter exit

如果數(shù)組為 [3, 6, 9, 12, 15]，將此數(shù)組綁定到三個(gè) p 元素的選擇集上。可以想象，會(huì)有兩個(gè)數(shù)據(jù)沒有元素與之對(duì)應(yīng)，這時(shí)候 D3 會(huì)建立兩個(gè)空的元素與數(shù)據(jù)對(duì)應(yīng)，這一部分就稱為 Enter。而有元素與數(shù)據(jù)對(duì)應(yīng)的部分稱為 Update。如果數(shù)組為 [3]，則會(huì)有兩個(gè)元素沒有數(shù)據(jù)綁定，那么沒有數(shù)據(jù)綁定的部分被稱為 Exit