可视化交互行为

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

事件；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和zoomd3.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