可視化交互行爲

交互式入門：鼠標，鍵盤，觸屏

事件；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