可视化交互行为

交互式入门：鼠标，键盘，触屏

事件；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");

zoom事件下，d3.event