D3.js的v5版本入門教程（第十一章）——交互式操做

D3.js的v5版本入門教程（第十一章）

 

 

 

    與圖形進行交互操做是很重要的！所謂的交互操做也就是爲圖形元素添加監聽事件，好比說當你鼠標放在某個圖形元素上面的時候，就會顯示相應的文字，而當鼠標移開後，文字就會消失，或者鼠標單擊一下某圖形元素就會使它動起來

    爲了與圖形元素進行交互操做，咱們仍是須要如下新的知識點

on("eventName",function)；該函數是添加一個監聽事件，它的第一個參數是事件類型，第二個參數是響應事件的內容
d3.select(this),選擇當前元素
    常見的事件類型

click：鼠標單擊某元素時觸發，至關於mousedown和mouseup的組合
mouseover：鼠標放在某元素上觸發
mouseout：鼠標移出某元素時觸發
mousemove：鼠標移動時觸發
mousedown：鼠標按鈕被按下時觸發
mouseup：鼠標按鈕被鬆開時觸發
dblclick：鼠標雙擊時觸發
固然還有不少，上面列出來的只是關於鼠標監聽事件，還有鍵盤等的監聽事件，在這裏就很少講了，給上官網API：https://developer.mozilla.org/en-US/docs/Web/Events#Standard_events
    查看監聽事件

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

    這樣的話你就能夠在chrome瀏覽器的控制檯看到輸出的event事件了

    爲柱狀圖添加監聽事件

.on("mouseover",function(){
var rect = d3.select(this)
.transition()
.duration(1500)//當鼠標放在矩形上時，矩形變成黃色
.attr("fill","yellow");
})
.on("mouseout",function(){
var rect = d3.select(this)
.transition()
.delay(1500)
.duration(1500)//當鼠標移出時，矩形變成藍色
.attr("fill","blue");
})

 

    代碼說明：

        -var rect = d3.select(this)，熟悉編程語言的人可能比較清楚this的含義，由於我是在矩形上邊添加監聽，因此句代碼返回的是當前矩形

        -前面咱們已經講過transition的用法，你們應該很熟悉了。這裏只是一個比較綜合的案例

        -只找到第九章的繪製柱狀圖的那段代碼中繪製矩形的代碼段的最後加上上面的代碼便可

    最後，附上截圖

 

 

————————————————版權聲明：本文爲CSDN博主「數星星等天明」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接及本聲明。原文連接：https://blog.csdn.net/qq_34414916/article/details/80035695