與圖表的交互，指在圖形元素上設(shè)置一個(gè)或多個(gè)監(jiān)聽(tīng)器，當(dāng)事件發(fā)生時(shí)，做出相應(yīng)的反應(yīng)。

http://wiki.jikexueyuan.com/project/d3wiki/images/interactive-1.png" alt="交互" />

什么是交互

交互，指的是用戶輸入了某種指令，程序接受到指令之后必須做出某種響應(yīng)。對(duì)可視化圖表來(lái)說(shuō)，交互能使圖表更加生動(dòng)，能表現(xiàn)更多內(nèi)容。例如，拖動(dòng)圖表中某些圖形、鼠標(biāo)滑到圖形上出現(xiàn)提示框、用觸屏放大或縮小圖形等等。

用戶用于交互的工具一般有三種：鼠標(biāo)、鍵盤(pán)、觸屏。

如何添加交互

對(duì)某一元素添加交互操作十分簡(jiǎn)單，代碼如下：

var circle = svg.append("circle");

circle.on("click", function(){
    //在這里添加交互內(nèi)容
});

這段代碼在 SVG 中添加了一個(gè)圓，然后添加了一個(gè)監(jiān)聽(tīng)器，是通過(guò) on() 添加的。在 D3 中，每一個(gè)選擇集都有 on() 函數(shù)，用于添加事件監(jiān)聽(tīng)器。

on() 的第一個(gè)參數(shù)是監(jiān)聽(tīng)的事件，第二個(gè)參數(shù)是監(jiān)聽(tīng)到事件后響應(yīng)的內(nèi)容，第二個(gè)參數(shù)是一個(gè)函數(shù)。

鼠標(biāo)常用的事件有：

• click：鼠標(biāo)單擊某元素時(shí)，相當(dāng)于 mousedown 和 mouseup 組合在一起。
• mouseover：光標(biāo)放在某元素上。
• mouseout：光標(biāo)從某元素上移出來(lái)時(shí)。
• mousemove：鼠標(biāo)被移動(dòng)的時(shí)候。
• mousedown：鼠標(biāo)按鈕被按下。
• mouseup：鼠標(biāo)按鈕被松開(kāi)。
• dblclick：鼠標(biāo)雙擊。

鍵盤(pán)常用的事件有三個(gè)：

• keydown：當(dāng)用戶按下任意鍵時(shí)觸發(fā)，按住不放會(huì)重復(fù)觸發(fā)此事件。該事件不會(huì)區(qū)分字母的大小寫(xiě)，例如“A”和“a”被視為一致。
• keypress：當(dāng)用戶按下字符鍵（大小寫(xiě)字母、數(shù)字、加號(hào)、等號(hào)、回車等）時(shí)觸發(fā)，按住不放會(huì)重復(fù)觸發(fā)此事件。該事件區(qū)分字母的大小寫(xiě)。

• keyup：當(dāng)用戶釋放鍵時(shí)觸發(fā)，不區(qū)分字母的大小寫(xiě)。 觸屏常用的事件有三個(gè)：

• touchstart：當(dāng)觸摸點(diǎn)被放在觸摸屏上時(shí)。
• touchmove：當(dāng)觸摸點(diǎn)在觸摸屏上移動(dòng)時(shí)。
• touchend：當(dāng)觸摸點(diǎn)從觸摸屏上拿開(kāi)時(shí)。 當(dāng)某個(gè)事件被監(jiān)聽(tīng)到時(shí)，D3 會(huì)把當(dāng)前的事件存到 d3.event 對(duì)象，里面保存了當(dāng)前事件的各種參數(shù)，請(qǐng)大家好好參詳。如果需要監(jiān)聽(tīng)到事件后立刻輸出該事件，可以添加一行代碼：

circle.on("click", function(){
    console.log(d3.event);
});

帶有交互的柱形圖

將第 5.1 章的部分代碼修改成如下代碼。

var rects = svg.selectAll(".MyRect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","MyRect")   //把類里的 fill 屬性清空
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("width", xScale.rangeBand() - rectPadding )
        .attr("height", function(d){
            return height - padding.top - padding.bottom - yScale(d);
        })
        .attr("fill","steelblue")       //填充顏色不要寫(xiě)在CSS里
        .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");
        });

這段代碼添加了鼠標(biāo)移入（mouseover），鼠標(biāo)移出（mouseout）兩個(gè)事件的監(jiān)聽(tīng)器。監(jiān)聽(tīng)器函數(shù)中都使用了 d3.select(this)，表示選擇當(dāng)前的元素，this 是當(dāng)前的元素，要改變響應(yīng)事件的元素時(shí)這么寫(xiě)就好。

mouseover 監(jiān)聽(tīng)器函數(shù)的內(nèi)容為：將當(dāng)前元素變?yōu)辄S色

mouseout 監(jiān)聽(tīng)器函數(shù)的內(nèi)容為：緩慢地將元素變?yōu)樵瓉?lái)的顏色（藍(lán)色）

源代碼

下載地址：rm80.zip

展示地址：http://www.ourd3js.com/demo/rm/R-8.0/interaction.html