d3筆記(2) - d3中自定義事件的使用
阿新 • • 發佈:2019-01-01
以下貼出程式碼,讀者結合已有知識即可理解。
<!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>