本文是D3.js v5版本的入门教程，重点介绍如何实现图形的交互操作，如mouseover和click事件。通过为柱状图添加监听事件，展示了如何改变图形状态，提供了一种增强用户体验的方法。同时，推荐了一个使用d3.js在网页端可视化neo4j图数据库的实战项目。
D3.js的v5版本入门教程（第十一章）
与图形进行交互操作是很重要的！所谓的交互操作也就是为图形元素添加监听事件，比如说当你鼠标放在某个图形元素上面的时候，就会显示相应的文字，而当鼠标移开后，文字就会消失，或者鼠标单击一下某图形元素就会使它动起来
为了与图形元素进行交互操作，我们还是需要以下新的知识点
- on("eventName",function)；该函数是添加一个监听事件，它的第一个参数是事件类型，第二个参数是响应事件的内容
- d3.select(this),选择当前元素
常见的事件类型
- click：鼠标单击某元素时触发，相当于mousedown和mouseup的组合
- mouseover：鼠标放在某元素上触发
- mouseout：鼠标移出某元素时触发
- mousemove：鼠标移动时触发
- mousedown：鼠标按钮被按下时触发
- mouseup：鼠标按钮被松开时触发
- dblclick：鼠标双击时触发
- 当然还有很多，上面列出来的只是关于鼠标监听事件，还有键盘等的监听事件，在这里就不多讲了，给上官网API：
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
