以下贴出代码，读者结合已有知识即可理解。
<!doctype html>
<html>
<head>
<style>
div {
height: 100px;
width: 100px;
background-color: steelblue;
margin:5px;
}
</style>
<script src="d3.js"></script>
</head>
<body>
<div>
<p></p>
<p>d3自定义事件测试</p>
</div>
<script>
d3.selectAll("div")
.on("mouseover", function(){
d3.select(this)
.style("background-color", "orange");
// Get current event info
console.log(d3.event);
// Get x & y co-ordinates
console.log(d3.mouse(this));
d3.select(this).dispatch("customEvent");
})
.on("mouseout", function(){
d3.select(this)
.style("background-color", "steelblue")
})
.on("customEvent", function(){
console.log("自定义事件 - mouseover", d3.event);
});
d3.selectAll("p") //可以用一个空ele作为全局事件分发器
.on("customEvent", function(){
console.log(this, "自定义事件 - mouseover");
});
</script>
</body>
</html>