事件偵聽器偵聽在特定DOM元素上觸發(fā)的特定事件。記得嗎，我們做過類似的事？
d3.select("p")
.on("click", function() {
// Do something on click
// Remember, we drew random barcharts?
})
html5中的鼠標事件
| 鼠標事件 | 說明 |
|---|---|
| onclick | 單擊鼠標 |
| ondblclick | 雙擊鼠標 |
| ondrag | 拖動元素 |
| ondragend | 拖動操作結(jié)束 |
| ondragenter | 元素被拖動至有效的拖放目標 |
| ondragleave | 元素離開有效拖放目標 |
| ondragover | 元素被拖動至有效拖放目標上方 |
| ondragstart | 拖動操作開始 |
| ondrop | 被拖動元素正在被拖放 |
| onmousedown | 按下鼠標按鈕 |
| onmousemove | 鼠標指針移動 |
| onmouseout | 鼠標指針移出元素 |
| onmouseover | 鼠標指針移至元素之上 |
| onmouseup | 松開鼠標按鈕 |
| onmousewheel | 轉(zhuǎn)動鼠標滾輪 |
| onscroll | 滾動元素滾動元素的滾動條 |
我們剛剛將事件偵聽器綁定到p元素。這段代碼偵聽用戶單擊元素時觸發(fā)的任何單擊事件。
事件可以是“click”、“mouseover”或“submit”，也可以是瀏覽器支持的任何DOM事件類型
讓我們看看我們使用過的條形圖
<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view30"></div>
<script>
data = [120, 140, 100, 130, 150, 130, 190, 150, 190, 110,
110, 140, 120, 100, 170, 120, 120, 160, 120, 180]
svg = d3.select("#view30")
.append("svg")
.attr("width", 250)
.attr("height", 270)
rects = svg.selectAll('rect')
.data(data).enter()
.append('rect')
.attr('x', 0)
.attr('y', function(d,i) {return i * 15})
.attr('width', function(d) {return d})
.attr('height', 14)
labels = svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d) {return d})
.attr("y", function(d,i) {return i*15 + 10})
.attr("x", function(d) {return d - 20})
.attr("font-family", "sans-serif")
.attr("font-size", "10px")
.attr("fill", "white")
</script>
條形圖
添加點擊事件
要打印矩形下的基準面，請將顏色更改為淡綠色
%%HTML
<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view31"></div>
<script>
data = [120, 140, 100, 130, 150, 130, 190, 150, 190, 110,
110, 140, 120, 100, 170, 120, 120, 160, 120, 180]
svg = d3.select("#view31")
.append("svg")
.attr("width", 250)
.attr("height", 270)
rects = svg.selectAll('rect')
.data(data).enter()
.append('rect')
.attr('x', 0)
.attr('y', function(d,i) {return i * 15})
.attr('width', function(d) {return d})
.attr('height', 14)
rects.on("click", function(d,i) {
d3.select(this)
.attr("fill" , "rgb(0,"+i+",0)")
})
labels = svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d) {return d})
.attr("y", function(d,i) {return i*15 + 10})
.attr("x", function(d) {return d - 20})
.attr("font-family", "sans-serif")
.attr("font-size", "10px")
.attr("fill", "white")
</script>
點擊事件
添加懸停事件
<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view32"></div>
<script>
data = [120, 140, 100, 130, 150, 130, 190, 150, 190, 110,
110, 140, 120, 100, 170, 120, 120, 160, 120, 180]
svg = d3.select("#view32")
.append("svg")
.attr("width", 250)
.attr("height", 270)
rects = svg.selectAll('rect')
.data(data).enter()
.append('rect')
.attr('x', 0)
.attr('y', function(d,i) {return i * 15})
.attr('width', function(d) {return d})
.attr('height', 14)
rects.on("mouseover", function(d,i) {
d3.select(this)
.attr("fill" , "rgb(0,"+i+",0)")
})
labels = svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d) {return d})
.attr("y", function(d,i) {return i*15 + 10})
.attr("x", function(d) {return d - 20})
.attr("font-family", "sans-serif")
.attr("font-size", "10px")
.attr("fill", "white")
</script>
懸停事件
添加懸停離開事件
<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view33"></div>
<script>
data = [120, 140, 100, 130, 150, 130, 190, 150, 190, 110,
110, 140, 120, 100, 170, 120, 120, 160, 120, 180]
svg = d3.select("#view33")
.append("svg")
.attr("width", 250)
.attr("height", 270)
rects = svg.selectAll('rect')
.data(data).enter()
.append('rect')
.attr('x', 0)
.attr('y', function(d,i) {return i * 15})
.attr('width', function(d) {return d})
.attr('height', 14)
rects.on("mouseover", function(d,i) {
d3.select(this)
.attr("fill" , "rgb(0,"+i+",0)")
})
rects.on("mouseout", function(d) {
d3.select(this)
.attr("fill" , "black")
})
labels = svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d) {return d})
.attr("y", function(d,i) {return i*15 + 10})
.attr("x", function(d) {return d - 20})
.attr("font-family", "sans-serif")
.attr("font-size", "10px")
.attr("fill", "white")
</script>
mouseout
添加過渡效果
為了讓它看起來像我們在演奏五彩繽紛的音樂！
<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view34"></div>
<script>
data = [120, 140, 100, 130, 150, 130, 190, 150, 190, 110,
110, 140, 120, 100, 170, 120, 120, 160, 120, 180]
svg = d3.select("#view34")
.append("svg")
.attr("width", 250)
.attr("height", 270)
rects = svg.selectAll('rect')
.data(data).enter()
.append('rect')
.attr('x', 0)
.attr('y', function(d,i) {return i * 15})
.attr('width', function(d) {return d})
.attr('height', 14)
rects.on("mouseover", function(d,i) {
d3.select(this)
.attr("fill" , "rgb(0,"+i+",0)")
})
rects.on("mouseout", function(d) {
d3.select(this)
.transition()
.duration(1200)
.attr("fill" , "black")
})
labels = svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d) {return d})
.attr("y", function(d,i) {return i*15 + 10})
.attr("x", function(d) {return d - 20})
.attr("font-family", "sans-serif")
.attr("font-size", "10px")
.attr("fill", "white")
</script>
duration
關(guān)于代碼運行效果
由于在簡書上不能展示代碼的運行結(jié)果，我在網(wǎng)上搭建了一個 jupyter notebook http://jupyter.cyber-life.cn/lab，我將本套教程的筆記和源代碼寫在了上面，可以在線查看代碼運行效果，還可以調(diào)試代碼，有需要的同學私信我。
