Shadow dom support

.gitignore

@@ -3,3 +3,4 @@ node_modules/*
 build/*
 website/core/.DS_Store
 bower_components/
+.DS_Store

README.md

@@ -55,6 +55,7 @@ Lots! A big thanks to the developers of these scripts.
 
 ### Changelog
 
+- `0.1.7` - Apr 18, 2015. Added support for shadow DOM.
 - `0.1.6` - Feb 10, 2015. Bug fixes.
 - `0.1.5` - Dec 14, 2014. placeholderParser option added for tooltips; bug fixes.
 - `0.1.4` - Nov 16, 2014, Tooltips added, bug fixes.

bower.json

@@ -1,6 +1,6 @@
 {
 	"name": "d3pie",
-	"version": "0.1.4",
+	"version": "0.1.9",
 	"homepage": "http://d3pie.org",
 	"authors": [
 		"Ben Keen <ben.keen@gmail.com>"

d3pie-source/_helpers.js

@@ -19,12 +19,12 @@ var helpers = {
 		return svg;
 	},
 
-	whenIdExists: function(id, callback) {
+	whenIdExists: function(id, pie, callback) {
 		var inc = 1;
 		var giveupIterationCount = 1000;
 
 		var interval = setInterval(function() {
-			if (document.getElementById(id)) {
+			if (pie.rootNode.getElementById(id)) {
 				clearInterval(interval);
 				callback();
 			}
@@ -35,14 +35,14 @@ var helpers = {
 		}, 1);
 	},
 
-	whenElementsExist: function(els, callback) {
+	whenElementsExist: function(els, pie, callback) {
 		var inc = 1;
 		var giveupIterationCount = 1000;
 
 		var interval = setInterval(function() {
 			var allExist = true;
 			for (var i=0; i<els.length; i++) {
-				if (!document.getElementById(els[i])) {
+				if (!pie.rootNode.getElementById(els[i])) {
 					allExist = false;
 					break;
 				}
@@ -86,8 +86,8 @@ var helpers = {
 		}
 	},
 
-	getDimensions: function(id) {
-		var el = document.getElementById(id);
+	getDimensions: function(id,pie) {
+		var el = pie.rootNode.getElementById(id);
 		var w = 0, h = 0;
 		if (el) {
 			var dimensions = el.getBBox();
@@ -326,4 +326,4 @@ var extend = function() {
 		}
 	}
 	return target;
-};
+};

d3pie-source/_labels.js

@@ -74,7 +74,7 @@ var labels = {
 		labels["dimensions-" + section] = [];
 
 		// get the latest widths, heights
-		var labelGroups = d3.selectAll("." + pie.cssPrefix + "labelGroup-" + section);
+		var labelGroups = d3.select(pie.rootNode).selectAll("." + pie.cssPrefix + "labelGroup-" + section);
 		labelGroups.each(function(d, i) {
 			var mainLabel  = d3.select(this).selectAll("." + pie.cssPrefix + "segmentMainLabel-" + section);
 			var percentage = d3.select(this).selectAll("." + pie.cssPrefix + "segmentPercentage-" + section);
@@ -91,19 +91,19 @@ var labels = {
 		var dims = labels["dimensions-" + section];
 		switch (sectionDisplayType) {
 			case "label-value1":
-				d3.selectAll("." + pie.cssPrefix + "segmentValue-" + section)
+				d3.select(pie.rootNode).selectAll("." + pie.cssPrefix + "segmentValue-" + section)
 					.attr("dx", function(d, i) { return dims[i].mainLabel.width + singleLinePad; });
 				break;
 			case "label-value2":
-				d3.selectAll("." + pie.cssPrefix + "segmentValue-" + section)
+				d3.select(pie.rootNode).selectAll("." + pie.cssPrefix + "segmentValue-" + section)
 					.attr("dy", function(d, i) { return dims[i].mainLabel.height; });
 				break;
 			case "label-percentage1":
-				d3.selectAll("." + pie.cssPrefix + "segmentPercentage-" + section)
+				d3.select(pie.rootNode).selectAll("." + pie.cssPrefix + "segmentPercentage-" + section)
 					.attr("dx", function(d, i) { return dims[i].mainLabel.width + singleLinePad; });
 				break;
 			case "label-percentage2":
-				d3.selectAll("." + pie.cssPrefix + "segmentPercentage-" + section)
+				d3.select(pie.rootNode).selectAll("." + pie.cssPrefix + "segmentPercentage-" + section)
 					.attr("dx", function(d, i) { return (dims[i].mainLabel.width / 2) - (dims[i].percentage.width / 2); })
 					.attr("dy", function(d, i) { return dims[i].mainLabel.height; });
 				break;
@@ -112,7 +112,7 @@ var labels = {
 
 	computeLabelLinePositions: function(pie) {
 		pie.lineCoordGroups = [];
-		d3.selectAll("." + pie.cssPrefix + "labelGroup-outer")
+		d3.select(pie.rootNode).selectAll("." + pie.cssPrefix + "labelGroup-outer")
 			.each(function(d, i) { return labels.computeLinePosition(pie, i); });
 	},
 
@@ -211,7 +211,7 @@ var labels = {
 	},
 
 	positionLabelGroups: function(pie, section) {
-		d3.selectAll("." + pie.cssPrefix + "labelGroup-" + section)
+		d3.select(pie.rootNode).selectAll("." + pie.cssPrefix + "labelGroup-" + section)
 			.style("opacity", 0)
 			.attr("transform", function(d, i) {
 				var x, y;
@@ -229,7 +229,7 @@ var labels = {
 						pieCenterCopy.y = newCoords.y;
 					}
 
-					var dims = helpers.getDimensions(pie.cssPrefix + "labelGroup" + i + "-inner");
+					var dims = helpers.getDimensions(pie.cssPrefix + "labelGroup" + i + "-inner",pie);
 					var xOffset = dims.w / 2;
 					var yOffset = dims.h / 4; // confusing! Why 4? should be 2, but it doesn't look right
 
@@ -252,7 +252,7 @@ var labels = {
 		setTimeout(function() {
 			var labelFadeInTime = (pie.options.effects.load.effect === "default") ? 400 : 1; // 400 is hardcoded for the present
 
-			d3.selectAll("." + pie.cssPrefix + "labelGroup-outer")
+			d3.select(pie.rootNode).selectAll("." + pie.cssPrefix + "labelGroup-outer")
 				.transition()
 				.duration(labelFadeInTime)
 				.style("opacity", function(d, i) {
@@ -261,7 +261,7 @@ var labels = {
 					return (percentage !== null && segmentPercentage < percentage) ? 0 : 1;
 				});
 
-			d3.selectAll("." + pie.cssPrefix + "labelGroup-inner")
+			d3.select(pie.rootNode).selectAll("." + pie.cssPrefix + "labelGroup-inner")
 				.transition()
 				.duration(labelFadeInTime)
 				.style("opacity", function(d, i) {
@@ -270,7 +270,7 @@ var labels = {
 					return (percentage !== null && segmentPercentage < percentage) ? 0 : 1;
 				});
 
-			d3.selectAll("g." + pie.cssPrefix + "lineGroups")
+			d3.select(pie.rootNode).selectAll("g." + pie.cssPrefix + "lineGroups")
 				.transition()
 				.duration(labelFadeInTime)
 				.style("opacity", 1);
@@ -435,7 +435,7 @@ var labels = {
 	 * @param i 0-N where N is the dataset size - 1.
 	 */
 	getIdealOuterLabelPositions: function(pie, i) {
-		var labelGroupDims = d3.select("#" + pie.cssPrefix + "labelGroup" + i + "-outer").node().getBBox();
+		var labelGroupDims = d3.select(pie.rootNode).select("#" + pie.cssPrefix + "labelGroup" + i + "-outer").node().getBBox();
 		var angle = segments.getSegmentAngle(i, pie.options.data.content, pie.totalSize, { midpoint: true });
 
 		var originalX = pie.pieCenter.x;

d3pie-source/_segments.js

@@ -87,7 +87,7 @@ var segments = {
 	},
 
 	addSegmentEventHandlers: function(pie) {
-		var arc = d3.selectAll("." + pie.cssPrefix + "arc,." + pie.cssPrefix + "labelGroup-inner,." + pie.cssPrefix + "labelGroup-outer");
+		var arc = d3.select(pie.rootNode).selectAll("." + pie.cssPrefix + "arc,." + pie.cssPrefix + "labelGroup-inner,." + pie.cssPrefix + "labelGroup-outer");
 
 		arc.on("click", function() {
 			var currentEl = d3.select(this);
@@ -98,13 +98,14 @@ var segments = {
 				segment = currentEl.select("path");
 			} else {
 				var index = currentEl.attr("data-index");
-				segment = d3.select("#" + pie.cssPrefix + "segment" + index);
+				segment = d3.select(pie.rootNode).select("#" + pie.cssPrefix + "segment" + index);
 			}
 			var isExpanded = segment.attr("class") === pie.cssPrefix + "expanded";
 			segments.onSegmentEvent(pie, pie.options.callbacks.onClickSegment, segment, isExpanded);
 			if (pie.options.effects.pullOutSegmentOnClick.effect !== "none") {
 				if (isExpanded) {
-					segments.closeSegment(pie, segment.node());
+					var speed =pie.options.effects.pullOutSegmentOnClick.speed;
+					segments.closeSegment(pie, segment.node(),speed);
 				} else {
 					segments.openSegment(pie, segment.node());
 				}
@@ -119,7 +120,7 @@ var segments = {
 				segment = currentEl.select("path");
 			} else {
 				index = currentEl.attr("data-index");
-				segment = d3.select("#" + pie.cssPrefix + "segment" + index);
+				segment = d3.select(pie.rootNode).select("#" + pie.cssPrefix + "segment" + index);
 			}
 
 			if (pie.options.effects.highlightSegmentOnMouseover) {
@@ -149,7 +150,7 @@ var segments = {
 				segment = currentEl.select("path");
 			} else {
 				index = currentEl.attr("data-index");
-				segment = d3.select("#" + pie.cssPrefix + "segment" + index);
+				segment = d3.select(pie.rootNode).select("#" + pie.cssPrefix + "segment" + index);
 			}
 
 			if (pie.options.effects.highlightSegmentOnMouseover) {
@@ -192,8 +193,8 @@ var segments = {
 		pie.isOpeningSegment = true;
 
 		// close any open segments
-		if (d3.selectAll("." + pie.cssPrefix + "expanded").length > 0) {
-			segments.closeSegment(pie, d3.select("." + pie.cssPrefix + "expanded").node());
+		if (d3.select(pie.rootNode).selectAll("." + pie.cssPrefix + "expanded").length > 0) {
+			segments.closeSegment(pie, d3.select(pie.rootNode).select("." + pie.cssPrefix + "expanded").node());
 		}
 
 		d3.select(segment).transition()
@@ -217,7 +218,8 @@ var segments = {
 
 	closeSegment: function(pie, segment) {
 		d3.select(segment).transition()
-			.duration(400)
+			.ease(pie.options.effects.pullOutSegmentOnClick.effect)
+			.duration(pie.options.effects.pullOutSegmentOnClick.speed)
 			.attr("transform", "translate(0,0)")
 			.each("end", function(d, i) {
 				d3.select(this).attr("class", "");

d3pie-source/_tooltips.js

@@ -43,15 +43,15 @@ var tt = {
 		tooltips.selectAll("." + pie.cssPrefix + "tooltip rect")
 			.attr({
 				width: function (d, i) {
-					var dims = helpers.getDimensions(pie.cssPrefix + "tooltip" + i);
+					var dims = helpers.getDimensions(pie.cssPrefix + "tooltip" + i, pie);
 					return dims.w + (2 * pie.options.tooltips.styles.padding);
 				},
 				height: function (d, i) {
-					var dims = helpers.getDimensions(pie.cssPrefix + "tooltip" + i);
+					var dims = helpers.getDimensions(pie.cssPrefix + "tooltip" + i, pie);
 					return dims.h + (2 * pie.options.tooltips.styles.padding);
 				},
 				y: function (d, i) {
-					var dims = helpers.getDimensions(pie.cssPrefix + "tooltip" + i);
+					var dims = helpers.getDimensions(pie.cssPrefix + "tooltip" + i, pie);
 					return -(dims.h / 2) + 1;
 				}
 			});
@@ -74,7 +74,7 @@ var tt = {
   },
 
   moveTooltip: function(pie) {
-    d3.selectAll("#" + pie.cssPrefix + "tooltip" + tt.currentTooltip)
+    d3.select(pie.rootNode).selectAll("#" + pie.cssPrefix + "tooltip" + tt.currentTooltip)
       .attr("transform", function(d) {
         var mouseCoords = d3.mouse(this.parentNode);
         var x = mouseCoords[0] + pie.options.tooltips.styles.padding + 2;

d3pie-source/d3pie-source.js

@@ -22,7 +22,7 @@
 }(this, function() {
 
 	var _scriptName = "d3pie";
-	var _version = "0.1.6";
+	var _version = "0.1.9";
 
 	// used to uniquely generate IDs and classes, ensuring no conflict between multiple pies on the same page
 	var _uniqueIDCounter = 0;
@@ -43,13 +43,14 @@
 	// --------------------------------------------------------------------------------------------
 
 	// our constructor
-	var d3pie = function(element, options) {
+	var d3pie = function(element, options, shadowRoot) {
 
+    this.rootNode = shadowRoot || document;
 		// element can be an ID or DOM element
 		this.element = element;
 		if (typeof element === "string") {
 			var el = element.replace(/^#/, ""); // replace any jQuery-like ID hash char
-			this.element = document.getElementById(el);
+			this.element = this.rootNode.getElementById(el);
 		}
 
 		var opts = {};
@@ -133,7 +134,7 @@
 		if (index < 0 || index > this.options.data.content.length-1) {
 			return;
 		}
-		segments.openSegment(this, d3.select("#" + this.cssPrefix + "segment" + index).node());
+		segments.openSegment(this, d3.select(this.rootNode).select("#" + this.cssPrefix + "segment" + index).node());
 	};
 
 	d3pie.prototype.closeSegment = function() {
@@ -151,7 +152,7 @@
 			case "header.title.text":
 				var oldVal = helpers.processObj(this.options, propKey);
 				helpers.processObj(this.options, propKey, value);
-				d3.select("#" + this.cssPrefix + "title").html(value);
+				d3.select(this.rootNode).select("#" + this.cssPrefix + "title").html(value);
 				if ((oldVal === "" && value !== "") || (oldVal !== "" && value === "")) {
 					this.redraw();
 				}
@@ -160,7 +161,7 @@
 			case "header.subtitle.text":
 				var oldValue = helpers.processObj(this.options, propKey);
 				helpers.processObj(this.options, propKey, value);
-				d3.select("#" + this.cssPrefix + "subtitle").html(value);
+				d3.select(this.rootNode).select("#" + this.cssPrefix + "subtitle").html(value);
 				if ((oldValue === "" && value !== "") || (oldValue !== "" && value === "")) {
 					this.redraw();
 				}
@@ -230,9 +231,9 @@
 
 		// the footer never moves. Put it in place now
 		var self = this;
-		helpers.whenIdExists(this.cssPrefix + "footer", function() {
+		helpers.whenIdExists(this.cssPrefix + "footer", self, function() {
 			text.positionFooter(self);
-			var d3 = helpers.getDimensions(self.cssPrefix + "footer");
+			var d3 = helpers.getDimensions(self.cssPrefix + "footer",self);
 			self.textComponents.footer.h = d3.h;
 			self.textComponents.footer.w = d3.w;
 		});
@@ -243,14 +244,14 @@
 		if (this.textComponents.subtitle.exists) { reqEls.push(this.cssPrefix + "subtitle"); }
 		if (this.textComponents.footer.exists)   { reqEls.push(this.cssPrefix + "footer"); }
 
-		helpers.whenElementsExist(reqEls, function() {
+		helpers.whenElementsExist(reqEls, self, function() {
 			if (self.textComponents.title.exists) {
-				var d1 = helpers.getDimensions(self.cssPrefix + "title");
+				var d1 = helpers.getDimensions(self.cssPrefix + "title",self);
 				self.textComponents.title.h = d1.h;
 				self.textComponents.title.w = d1.w;
 			}
 			if (self.textComponents.subtitle.exists) {
-				var d2 = helpers.getDimensions(self.cssPrefix + "subtitle");
+				var d2 = helpers.getDimensions(self.cssPrefix + "subtitle",self);
 				self.textComponents.subtitle.h = d2.h;
 				self.textComponents.subtitle.w = d2.w;
 			}