一、圖表交互操作

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

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

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

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

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

二、布局

　　布局，可以理解成 “制作常見圖形的函數”，有了它制作各種相對復雜的圖表就方便多了。

1、布局是什麽

　　布局，英文是 Layout。從字面看，可以想到有“決定什麽元素繪制在哪裏”的意思。布局是 D3 中一個十分重要的概念。D3 與其它很多可視化工具不同，相對來說較底層，對初學者來說不太方便，但是一旦掌握了，就比其他工具更加得心應手。下圖展示了 D3 與其它可視化工具的區別：

　　可以看到，D3 的步驟相對來說較多。壞處是對初學者不方便、也不好理解。好處是能夠制作出更加精密的圖形。因此，我們可以據此定義什麽時候選擇 D3 比較好：

• 選擇 D3：如果希望開發腦海中任意想象到的圖表。
• 選擇 Highcharts、Echarts 等：如果希望開發幾種固定種類的、十分大眾化的圖表。

2、如何理解布局

　　從上面的圖可以看到，布局的作用是：將不適合用於繪圖的數據轉換成了適合用於繪圖的數據。為了便於初學者理解，可以將布局的作用理解成：數據轉換。

3、布局有哪些

　　D3 總共提供了 12 個布局：

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

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

D3.js系列——交互式操作和布局