D3.js系列——交互式操做和佈局

1、圖表交互操做

　　與圖表的交互，指在圖形元素上設置一個或多個監聽器，當事件發生時，作出相應的反應。

　　交互，指的是用戶輸入了某種指令，程序接受到指令以後必須作出某種響應。對可視化圖表來講，交互能使圖表更加生動，能表現更多內容。例如，拖動圖表中某些圖形、鼠標滑到圖形上出現提示框、用觸屏放大或縮小圖形等等。

　　用戶用於交互的工具通常有三種：鼠標、鍵盤、觸屏。

　　添加交互：對某一元素添加交互操做十分簡單，代碼以下：

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

　　這段代碼在 SVG 中添加了一個圓，而後添加了一個監聽器，是經過 on() 添加的。在 D3 中，每個選擇集都有 on() 函數，用於添加事件監聽器。

　　on() 的第一個參數是監聽的事件，第二個參數是監聽到事件後響應的內容，第二個參數是一個函數。

　　鼠標經常使用的事件有：

• click：鼠標單擊某元素時，至關於 mousedown 和 mouseup 組合在一塊兒。
• mouseover：光標放在某元素上。
• mouseout：光標從某元素上移出來時。
• mousemove：鼠標被移動的時候。
• mousedown：鼠標按鈕被按下。
• mouseup：鼠標按鈕被鬆開。
• dblclick：鼠標雙擊。

　　鍵盤經常使用的事件有三個：

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

　　觸屏經常使用的事件有三個：

• touchstart：當觸摸點被放在觸摸屏上時。
• touchmove：當觸摸點在觸摸屏上移動時。
• touchend：當觸摸點從觸摸屏上拿開時。

　　當某個事件被監聽到時，D3 會把當前的事件存到 d3.event 對象，裏面保存了當前事件的各類參數，請你們好好參詳。若是須要監聽到事件後馬上輸出該事件，能夠添加一行代碼：

circle.on("click", function(){ console.log(d3.event); });

　　實例：添加鼠標移入（mouseover），鼠標移出（mouseout）兩個事件的監聽器。監聽器函數中都使用了 d3.select(this)，表示選擇當前的元素，this 是當前的元素，要改變響應事件的元素時這麼寫就好。

.attr("fill","steelblue") .on("mouseover",function(d,i){ d3.select(this) .attr("fill","yellow"); }) .on("mouseout",function(d,i){ d3.select(this) .transition() .duration(500) .attr("fill","steelblue"); });

2、佈局

　　佈局，能夠理解成 「製做常見圖形的函數」，有了它製做各類相對複雜的圖表就方便多了。

一、佈局是什麼

　　佈局，英文是 Layout。從字面看，能夠想到有「決定什麼元素繪製在哪裏」的意思。佈局是 D3 中一個十分重要的概念。D3 與其它不少可視化工具不一樣，相對來講較底層，對初學者來講不太方便，可是一旦掌握了，就比其餘工具更加駕輕就熟。下圖展現了 D3 與其它可視化工具的區別：

　　能夠看到，D3 的步驟相對來講較多。壞處是對初學者不方便、也很差理解。好處是可以製做出更加精密的圖形。所以，咱們能夠據此定義何時選擇 D3 比較好：

• 選擇 D3：若是但願開發腦海中任意想象到的圖表。
• 選擇 Highcharts、Echarts 等：若是但願開發幾種固定種類的、十分大衆化的圖表。

二、如何理解佈局

　　從上面的圖能夠看到，佈局的做用是：將不適合用於繪圖的數據轉換成了適合用於繪圖的數據。爲了便於初學者理解，能夠將佈局的做用理解成：數據轉換。

三、佈局有哪些

　　D3 總共提供了 12 個佈局：

　　餅狀圖（Pie）、力導向圖（Force）、弦圖（Chord）、樹狀圖（Tree）、集羣圖（Cluster）、捆圖（Bundle）、打包圖（Pack）、直方圖（Histogram）、分區圖（Partition）、堆棧圖（Stack）、矩陣樹圖（Treemap）、層級圖（Hierarchy）。

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