[ Launch: Cross Element Event Handling ] 9031061 by ljbrown238
-
-
Save ljbrown238/9031061 to your computer and use it in GitHub Desktop.
Cross Element Event Handling
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"description":"Cross Element Event Handling","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var svg = d3.select("svg"); | |
// Create the custom event dispatch object | |
var dispatch = d3.dispatch("customHover"); | |
var instructions = svg.append("text") | |
.attr("x",20) | |
.attr("y",25) | |
.text("Move your mouse over the blue square to see x,y values appear."); | |
svg.append("rect") | |
.attr("x",20) | |
.attr("y",35) | |
.attr("width",100) | |
.attr("height",100) | |
.attr("fill","blue") | |
// Here we will call the custom dispatch function when an event happens | |
.on("mousemove", function() { dispatch.customHover(this); }); | |
var myText1 = svg.append("text") | |
.attr("x",20) | |
.attr("y",156) | |
.text("mouse x: "); | |
var myText2 = svg.append("text") | |
.attr("x",20) | |
.attr("y",200) | |
.text("mouse y: "); | |
// We will listen for the custom event, and when it happens, we will | |
// update the attributes of the two SVG text elements | |
dispatch.on("customHover",function(_this) { | |
myText1.text("mouse x: " + d3.mouse(_this)[0]); | |
myText2.text("mouse x: " + d3.mouse(_this)[1]); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment