使用者用於互動的工具一般有三種：滑鼠、鍵盤、觸屏。

1. 新增互動

對某一元素新增互動操作十分簡單，程式碼如下：

//畫布大小

var width = 500, height = 500;

// 在body裡新增一個SVG畫布

var svg = d3.select("body")

    .append("svg")

    .attr("width",width)

    .attr("height",height);

var circle = svg.append("circle")

        .attr("cx", 100)

        .attr("cy", 100)

        .attr("r", 45)

        .style("fill","green");

circle.on("click", function(){

    // 新增互動內容

});

　　這段程式碼在 SVG 中添加了一個圓，然後添加了一個監聽器，是通過 on() 新增的。在 D3 中，每一個選擇集都有 on() 函式，用於新增事件監聽器。

　　on() 的第一個引數是監聽的事件，第二個引數是一個函式，定義監聽到事件後響應的內容。

滑鼠常用的事件有：

  • click：滑鼠單擊某元素時，相當於 mousedown 和 mouseup 組合在一起。
  • mouseover：游標放在某元素上。
  • mouseout：游標從某元素上移出來時。
  • mousemove：滑鼠被移動的時候。
  • mousedown：滑鼠按鈕被按下。
  • mouseup：滑鼠按鈕被鬆開。
  • dblclick：滑鼠雙擊。

鍵盤常用的事件有三個:

  • keydown：當用戶按下任意鍵時觸發，按住不放會重複觸發此事件。該事件不會區分字母的大小寫，例如“A”和“a”被視為一致。
  • keypress：當用戶按下字元鍵（大小寫字母、數字、加號、等號、回車等）時觸發，按住不放會重複觸發此事件。該事件區分字母的大小寫。

  • keyup：當用戶釋放鍵時觸發，不區分字母的大小寫。

觸屏常用的事件有三個:

  • touchstart：當觸控點被放在觸控式螢幕上時。
  • touchmove：當觸控點在觸控式螢幕上移動時。
  • touchend：當觸控點從觸控式螢幕上拿開時。 當某個事件被監聽到時，D3 會把當前的事件存到 d3.event 物件，裡面儲存了當前事件的各種引數，請大家好好參詳。如果需要監聽到事件後立刻輸出該事件，可以新增一行程式碼:
circle.on("click", function(){

    console.log(d3.event);

});

2. 帶有互動的柱形圖

//畫布大小

var width = 500, height = 500;

// 在body裡新增一個SVG畫布

var svg = d3.select("body")

    .append("svg")

    .attr("width",width)

    .attr("height",height);

// 畫布周邊的空白

var padding = {left: 30, right: 30, top: 20, bottom: 20};

// 定義一個數組

var dataset = [10, 20, 30, 40, 33, 24, 12, 5];

// x軸的比例尺

var xScale = d3.scale.ordinal()

    .domain(d3.range(dataset.length))

    .rangeRoundBands([0, width-padding.left - padding.right]);

// y軸的比例尺

var yScale = d3.scale.linear()

    .domain([0, d3.max(dataset)])

    .range([height - padding.top - padding.bottom, 0]);

// 定義x軸

var xAxis = d3.svg.axis()

    .scale(xScale)

    .orient("bottom");

// 定義y軸

var yAxis = d3.svg.axis()

    .scale(yScale)

    .orient("left");

// 矩形之間的空白

var rectPadding = 4;

// 新增矩形元素

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")       //填充顏色不要寫在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");

        });

// 新增文字元素

var texts = svg.selectAll(".MyText")

    .data(dataset)

    .enter()

    .append("text")

    .attr("class","MyText")

    .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("dx", function(){

        return (xScale.rangeBand() - rectPadding)/2;

    })

    .attr("dy", function(d){

        return 20;

    })

    .text(function(d){

        return d;

    })

// 新增x軸

svg.append("g")

    .attr("class","axis")

    .attr("transform","translate("+ padding.left + "," +(height-padding.bottom)+")")

    .call(xAxis);

// 新增y軸

svg.append("g")

    .attr("class","axis")

    .attr("transform","translate("+ padding.left + "," + padding.top + ")")

    .call(yAxis);　　

　　這段程式碼添加了滑鼠移入（mouseover），滑鼠移出（mouseout）兩個事件的監聽器。監聽器函式中都使用了d3.select(this)，表示選擇當前的元素，this 是當前的元素，要改變響應事件的元素時這麼寫就好。
　　mouseover 監聽器函式的內容為：將當前元素變為黃色
　　mouseout 監聽器函式的內容為：緩慢地將元素變為原來的顏色（藍色）