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

    本人的個人部落格為： www.ourd3js.com 

    csdn部落格為： blog.csdn.net/lzhlzz 

    轉載請注明出處，謝謝。

    這一節介紹如何進行對話的操作，如滑鼠單擊，滑鼠滑過等。

    對一個被選擇的元素，添加對話操作，代碼如下：

.on("click", function(){

} )
           

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

    常用的事件（event）有：

• click  ： 滑鼠單擊某元素時，相當于 mousedown 和 mouseup 組合在一起
• mouseover  ： 滑鼠移到某元素上
• mouseout  ： 滑鼠從某元素移開
• mousemove ： 滑鼠被移動
• mousedown : 滑鼠按鈕被按下
• mouseup : 滑鼠按鈕被松開
• 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   ，完整的代碼可在浏覽器中右鍵選擇欄中檢視。