Modules and Custom Events

_.md

[ Launch: Modules and Custom Events ] 9030792 by ljbrown238

config.json

{"description":"Modules and Custom Events","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}

inlet.js

d3.custom = {};

d3.custom.rect = function() {
	
	var height = 100;
	var width = 100;
	var color = "#00ff00";
	var y = 0;
	var x = 0;
	var namex = "DEFAULT";
	var myElement = null;		// This is a pointer to the element we create
	
	var dispatch = d3.dispatch("customHover");	
	
	function _export(_selection) {
		
		// We hang on to the element we create so we can use
		// methods to update the element live!
		myElement = _selection
	        .append("rect")
	        	.attr("x",x)
	        	.attr("y",y)
	        	.attr("width",width)
	        	.attr("height",height)
	        	.attr("fill",color)
	        	.on("mouseover", function() { dispatch.customHover(this, namex);});
	}

	_export.fill = function(_color) {
		if (!arguments.length) {
			return color;
		} else {
			color = _color;
			if (myElement) {
				myElement.attr("fill",color);
			}
			return this;
		}
	};
	
	_export.width = function(_height) {
		if (!arguments.length) {
			return height;
		} else {
			height = _height;
			if (myElement) {
				myElement.attr("height",height);
			}
		}
		return this;
	};
	
	_export.height = function(_width) {
		if (!arguments.length) {
			return width;
		} else {
			width = _width;
			if (myElement) {
				myElement.attr("width",width);
			}
		}
		return this;
	};
	
	_export.x = function(_x) {
		if (!arguments.length) {
			return x;
		} else {
			x = _x;
			if (myElement) {
				myElement.attr("x",x);
			}
		}
		return this;
	};
	
	_export.y = function(_y) {
		if (!arguments.length) {
			return y;
		} else {
			y = _y;
			if (myElement) {
				myElement.attr("y",y);
			}
		}
		return this;
	};
	
	_export.namex = function(_namex) {
		if (!arguments.length) return name;
		namex = _namex;
		return this;
	};
	
	d3.rebind(_export, dispatch, "on");
	
	return _export;
};

var svg = d3.select("svg");


var listener = function (_this,name) {
	console.log ("this:" + _this + ": name:" + name);
};


// We initially make three boxes left to right red, green, blue
var myRect1 = d3.custom.rect().fill("#ff0000").width(50).height(50).x(0).y(0).namex("first");
myRect1.on("customHover",listener);
svg.call(myRect1);

var myRect2 = d3.custom.rect().fill("#00ff00").width(50).height(50).x(50).y(0).namex("second");
myRect2.on("customHover",listener);
svg.call(myRect2);

var myRect3 = d3.custom.rect().fill("#0000ff").width(50).height(50).x(100).y(0).namex("third");
myRect3.on("customHover",listener);
svg.call(myRect3);


// Then, we change the color of the first to gray, move the second over to where the third was
// and finally move the third rect down.
// myRect1.fill("#c3c3c3");
// myRect2.x(100);
// myRect3.y(50);