【 D3.js 入門系列 --- 8 】 對話操做（事件）

    本人的我的博客爲： www.ourd3js.com 

    csdn博客爲： blog.csdn.net/lzhlzz 

    轉載請註明出處，謝謝。

---

    這一節介紹怎樣進行對話的操做，如鼠標單擊，鼠標滑過等。

    對一個被選擇的元素，加入對話操做，代碼例如如下：

.on("click", function(){

} )

    函數可以是無名函數。也可以是自定義的函數。上面代碼監聽的是鼠標單擊的事件。但鼠標在被選擇對象上單擊時，就會調用函數 function 。

    常用的事件（event）有：

• click  ： 鼠標單擊某元素時，至關於 mousedown 和 mouseup 組合在一塊兒
• mouseover  ： 鼠標移到某元素上
• mouseout  ： 鼠標從某元素移開
• mousemove ： 鼠標被移動
• mousedown : 鼠標button被按下
• mouseup : 鼠標button被鬆開
• dblclick  ：  鼠標雙擊

    如下使用在5.1節中作的樣例。爲當中的柱形圖加入對話操做。加入一部分代碼就能夠：

svg.selectAll("rect")
		   .data(dataset)
		   .enter()
		   .append("rect")
		   .attr("x", function(d,i){
				return 30 + xScale(i);
		   } )
		   .attr("y",function(d,i){
				return 50 + 500 - yScale(d) ;
		   })
		   .attr("width", function(d,i){
				return xScale.rangeBand();
		   })
		   .attr("height",yScale)
		   .attr("fill","red")
		   .on("click",function(d,i){
				d3.select(this)
				  .attr("fill","green");
		   })
		   .on("mouseover",function(d,i){
				d3.select(this)
				  .attr("fill","yellow");
		   })
		   .on("mouseout",function(d,i){
				d3.select(this)
				  .transition()
		          .duration(500)
				  .attr("fill","red");
		   });

    上面的代碼加入了鼠標點擊（ click ），鼠標移入（ mouseover ）。鼠標移出（ mouseout ）三個操做。

    上面的操做的函數中都調用了 d3.select(this) ， 這是表示選擇當前的元素，this 是當前的元素，因爲在事件中一般要改變被點擊的元素等，因此常有這段代碼，要記住。

    另外，爲了使得鼠標移出元素時產生漸變效果，使用了 transition 和 duration ，具體請看第6節。

    效果圖例如如下：

    用鼠標實際試試看吧，結果可見：   http://www.ourd3js.com/demo/event.html   。完整的代碼可在瀏覽器中右鍵選擇欄中查看。