D3.js：交互式操作

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

1. 添加交互

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

//畫布大小
var width = 500, height = 500; // 在body里添加一個SVG畫布
var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",height); var circle = svg.append("circle") .attr("cx", 100) .attr("cy", 100) .attr("r", 45) .style("fill","green"); 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); });

2. 帶有交互的柱形圖

//畫布大小
var width = 500, height = 500; // 在body里添加一個SVG畫布
var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",height); // 畫布周邊的空白
var padding = {left: 30, right: 30, top: 20, bottom: 20}; // 定義一個數組
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")   //把類里的 fill 屬性清空
        .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); }) .attr("fill","steelblue")       //填充顏色不要寫在CSS里
        .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"); }); // 添加文字元素
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);　　

　　這段代碼添加了鼠標移入（mouseover），鼠標移出（mouseout）兩個事件的監聽器。監聽器函數中都使用了d3.select(this)，表示選擇當前的元素，this 是當前的元素，要改變響應事件的元素時這么寫就好。
　　mouseover 監聽器函數的內容為：將當前元素變為黃色
　　mouseout 監聽器函數的內容為：緩慢地將元素變為原來的顏色（藍色）