事件侦听器侦听在特定DOM元素上触发的特定事件。记得吗，我们做过类似的事？
d3.select("p")
.on("click", function() {
// Do something on click
// Remember, we drew random barcharts?
})
html5中的鼠标事件
| 鼠标事件 | 说明 |
|---|---|
| onclick | 单击鼠标 |
| ondblclick | 双击鼠标 |
| ondrag | 拖动元素 |
| ondragend | 拖动操作结束 |
| ondragenter | 元素被拖动至有效的拖放目标 |
| ondragleave | 元素离开有效拖放目标 |
| ondragover | 元素被拖动至有效拖放目标上方 |
| ondragstart | 拖动操作开始 |
| ondrop | 被拖动元素正在被拖放 |
| onmousedown | 按下鼠标按钮 |
| onmousemove | 鼠标指针移动 |
| onmouseout | 鼠标指针移出元素 |
| onmouseover | 鼠标指针移至元素之上 |
| onmouseup | 松开鼠标按钮 |
| onmousewheel | 转动鼠标滚轮 |
| onscroll | 滚动元素滚动元素的滚动条 |
我们刚刚将事件侦听器绑定到p元素。这段代码侦听用户单击元素时触发的任何单击事件。
事件可以是“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
关于代码运行效果
由于在简书上不能展示代码的运行结果，我在网上搭建了一个 jupyter notebook http://jupyter.cyber-life.cn/lab，我将本套教程的笔记和源代码写在了上面，可以在线查看代码运行效果，还可以调试代码，有需要的同学私信我。
