D3.js可視化前端框架的使用要點

時間 2019-12-04

原文原文鏈接

1.安裝

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

2.介紹

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

<body>
   <p>1</p>
   <p>2</p>
    <p>3</p>
</body>

<script>
  p=d3.select("body").selectAll("p").text("aaaa"); // 能夠取到頁面上全部的p元素
</script>

以上就是D3的選擇集。數組

以上選擇了數據，如何綁定數據

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

datum():是指綁定一個數據到選擇集上。
data():綁定一個數組到選擇集上，而且數組的各項值與選擇集的各項綁定。dom

元素的選擇還能夠經過id 和class去查找

<p class="myclass">Pear</p>
   <p class="myclass">Banana</p>

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

元素的插入
append() insert()svg

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

刪除元素

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

3.畫圖表的要素

畫圖表以前都有一個前置工做要作，就是全部的東西都是畫在svg上的。

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

比例尺（scale）
比例尺分爲2種，一種是線性比例尺，一種是序數比例尺

先看線性比例尺代碼佈局

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() 返回一個線性比例尺。其中domain,設定比例尺的定義域，range設定比例尺的值域。動畫

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

看序數比例尺的代碼對象

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

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

那麼定義完比例尺了，怎麼去應用呢？事件

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

座標軸 axis

d3.svg.axis() 定義了一個座標軸
scale():指定比例尺
orient():指定刻度的朝向
ticks():指定的刻度的數量

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

4 圖表的動畫

transition() // 啓動動畫

duration(2000) //動畫的持續時間

ease(bounce) // 動畫類型經常使用的有linear circle elastic bounce

5.圖表的交互

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

通常用on加事件處理程序

鼠標經常使用的事件有：

click：鼠標單擊某元素時，至關於 mousedown 和 mouseup 組合在一塊兒。
mouseover：光標放在某元素上。
mouseout：光標從某元素上移出來時。
mousemove：鼠標被移動的時候。
mousedown：鼠標按鈕被按下。
mouseup：鼠標按鈕被鬆開。
dblclick：鼠標雙擊。
鍵盤經常使用的事件有三個：

keydown：當用戶按下任意鍵時觸發，按住不放會重複觸發此事件。該事件不會區分字母的大小寫，例如「A」和「a」被視爲一致。
keypress：當用戶按下字符鍵（大小寫字母、數字、加號、等號、回車等）時觸發，按住不放會重複觸發此事件。該事件區分字母的大小寫。
keyup：當用戶釋放鍵時觸發，不區分字母的大小寫。觸屏經常使用的事件有三個：

touchstart：當觸摸點被放在觸摸屏上時。
touchmove：當觸摸點在觸摸屏上移動時。
touchend：當觸摸點從觸摸屏上拿開時。當某個事件被監聽到時，D3 會把當前的事件存到 d3.event 對象，裏面保存了當前事件的各類參數，請你們好好參詳。若是須要監聽到事件後馬上輸出該事件，能夠添加一行代碼：

6. 圖表的佈局

佈局是幫你完成了數據轉換，不是幫你完成了畫圖

D3 總共提供了 12 個佈局：餅狀圖（Pie）、力導向圖（Force）、弦圖（Chord）、樹狀圖（Tree）、集羣圖（Cluster）、捆圖（Bundle）、打包圖（Pack）、直方圖（Histogram）、分區圖（Partition）、堆棧圖（Stack）、矩陣樹圖（Treemap）、層級圖（Hierarchy）。

12 個佈局中，層級圖（Hierarchy）不能直接使用。集羣圖、打包圖、分區圖、樹狀圖、矩陣樹圖是由層級圖擴展來的。如此一來，可以使用的佈局是 11 個（有 5 個是由層級圖擴展而來）。這些佈局的做用都是將某種數據轉換成另外一種數據，而轉換後的數據是利於可視化的。

具體看官網

7.理解update。enter exit

若是數組爲 [3, 6, 9, 12, 15]，將此數組綁定到三個 p 元素的選擇集上。能夠想象，會有兩個數據沒有元素與之對應，這時候 D3 會創建兩個空的元素與數據對應，這一部分就稱爲 Enter。而有元素與數據對應的部分稱爲 Update。若是數組爲 [3]，則會有兩個元素沒有數據綁定，那麼沒有數據綁定的部分被稱爲 Exit