d3笔记（2） - d3中自定义事件的使用

最新推荐文章于 2019-09-16 09:45:18 发布

borenliang

最新推荐文章于 2019-09-16 09:45:18 发布

阅读量568

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/BoRenLiang/article/details/85543766

版权

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

以下贴出代码，读者结合已有知识即可理解。

<!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>