交互式入门：鼠标，键盘，触屏
事件；d3.event
行为：退拽，缩放
1.鼠标点击事件
要领：
//鼠标常用事件： click，mouseover，mouseout，mousemove，mousedown，mouseup，dbclick
//鼠标事件都是在on（“click”，function（）{}）的形式中调用的
var rect = svg.selectAll("rect")
.data(dataset) //绑定数据
.enter() //获取enter部分
.append("rect") //添加rect元素，使其与绑定数组的长度一致
.attr("fill","steelblue") //设置颜色为steelblue
.attr("x", function(d,i){ //设置矩形的x坐标
return padding.left + xScale(i);
})
.attr("y", function(d){ //设置矩形的y坐标
return height- padding.bottom - yScale(d);
})
.attr("width",xScale.rangeBand()) //设置矩形的宽度
.attr("height",function(d){ //设置矩形的高度
return yScale(d);
})
.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");
}); 
mouseover下的d3.event
2.键盘事件
//键盘事件有三种，keydown，keypress,keyup。
//keydown和keypress区别：keydown是任意键，可以触发如上下左右，ctrl，shift等键，不区分大小写，keypress是字符键，且区分大小写，（大小写字母，数字，+，=，回车）
var rects=svg.selectAll("rect")
.data(charactor)
.enter()
.append("rect")
.attr("x",function(d,i){
return 40+i*60;
})
.attr("y",function(d,i){
return height/2;
})
.attr("width",function(d,i){
return 60;
})
.attr("height",function(d,i){
return 60;
})
.attr("rx",5)
.attr("ry",5)
.attr("fill","black")
var texts=svg.selectAll("text")
.data(charactor)
.enter()
.append("text")
.attr("x",function(d,i){
return 40+i*60;
})
.attr("y",function(d,i){
return height/2+30;
})
.attr("dx",function(d,i){
return 20;
})
.attr("dy",function(d,i){
return 0;
})
.attr("fill","white")
.attr("fontsize",20)
.text(function(d){
return d;
})
d3.select("body")
.on("keydown",function(){
texts.attr("fill",function(d,i){
if (d==String.fromCharCode(d3.event.keyCode)){
return "red";//将由事件获取的asc码转换为字符串
}else{
return "white";
}
})
})
.on("keyup",function(){
texts.attr("fill","white")
})
键盘事件下d3.event
二.事件
所有的事件都保存在d3.event对象中，其中我们的上边键盘事件d3.event.keyCode就是键盘事件中的一个变量成员，不同的事件d3.event中的成员是不同的，这个我们不用自己考虑，不同的事件设备会自己感知。
三.行为（behavior）
//behavior下的方法只有两种，drag和zoom
d3.behavior.drag - 创建拖动行为。
drag.on - 监听拖动事件。
drag.origin - 设置拖动行为的原点。
缩放
//zoom对象下的方法
d3.behavior.zoom - 创建缩放行为。
zoom.center - 鼠标滚轮缩放的焦点。
zoom.duration - 取得或设置双击事件的过渡持续的时间。
zoom.event - 设置完缩放比例或平移之后分发缩放事件。
zoom.on - 事件监听器。//on("zoomstart/zoom/zoomend")
zoom.scaleExtent - 可选参数，比例因子范围。
zoom.scale - 当前的比例因子。
zoom.size - 视口的大小。
zoom.translate - 当前的平移偏移量。
zoom.x - 可选比例尺，其定义域绑定到视口的_x_范围。
zoom.y - 可选比例尺，其定义域绑定到视口的_y_范围。
zoom - 给指定的元素应用缩放行为。1）drag
//original()方法确定的是被选择元素的初始坐标，方法返回x,y变量,也可以设定固定值，当拖动时，元素会跑到固定坐标上，再被拖动
var drag=d3.behavior.drag()
.origin(function(d,i){
return {x:d[0],y:d[1]};//set the start coordinate of the circle
})
.on("dragstart",function(d,i){
console.log("drag start")
})
.on("dragend",function(d,i){
console.log("drag end")
})
.on("drag",function(d){
d3.select(this)
.attr("cx",d[0]=d3.event.x) //transmit the mouse coordinates to the original
.attr("cy",d[1]=d3.event.y)
})
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx",function(d,i){
return d[0];
})
.attr("cy",function(d,i){
return d[1];
})
.attr("r",50)
.call(drag);
drag事件下d3.event
2)zoom
var dataset=[{cx:120,cy:120,r:50},
{cx:270,cy:120,r:40}
]
var zoom=d3.behavior.zoom()
.scaleExtent([1,10])
.on("zoom",function(d){
console.log(d3.event);
d3.select(this)
.attr("transform","translate("+d3.event.translate+")"
+"scale("+d3.event.scale+")");
})
//transform里有两个变量，translate用于平移，scale用于缩放，而d3.event中正好有这两个变量
var g=svg.append("g")
.call(zoom)
g.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx",function(d,i){
return d.cx;
})
.attr("cy",function(d,i){
return d.cy;
})
.attr("r",function(d,i){
return d.r;
})
.attr("fill","black");
