trace-viewer/trace_viewer/base/ui/sunburst_chart.html - platform/external/chromium-trace - Git at Google

 <!DOCTYPE html>
 <!--
 Copyright (c) 2014 The Chromium Authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->
 <link rel="import" href="/base/range.html">
 <link rel="import" href="/base/ui/d3.html">
 <link rel="import" href="/base/ui/dom_helpers.html">
 <link rel="import" href="/base/ui/chart_base.html">
 <link rel="stylesheet" href="/base/ui/sunburst_chart.css">
 <script>
 'use strict';

 tr.exportTo('tr.b.ui', function() {
   var ChartBase = tr.b.ui.ChartBase;
   var getColorOfKey = tr.b.ui.getColorOfKey;

   var MIN_RADIUS = 100;

   /**
    * @constructor
    */
   var SunburstChart = tr.b.ui.define('sunburst-chart', ChartBase);

   SunburstChart.prototype = {
     __proto__: ChartBase.prototype,

     decorate: function() {
       ChartBase.prototype.decorate.call(this);
       this.classList.add('sunburst-chart');

       this.data_ = undefined;
       this.seriesKeys_ = undefined;

       this.yDomainMin_ = 0.0;
       this.yDomainMax_ = 0.0;
       this.xDomainScale_ = undefined;
       this.yDomainScale_ = undefined;
       this.radius_ = undefined;
       this.arc_ = undefined;
       this.selectedNode_ = null;
       this.vis_ = undefined;
       this.nodes_ = undefined;
       this.minX_ = 0.0;
       this.maxX_ = 1.0;
       this.minY_ = 0.0;
       this.clickedY_ = 0;

       var chartAreaSel = d3.select(this.chartAreaElement);
       this.legendSel_ = chartAreaSel.append('g');

       var pieGroupSel = chartAreaSel.append('g')
         .attr('class', 'pie-group');
       this.pieGroup_ = pieGroupSel.node();

       this.backSel_ = pieGroupSel.append('g');


       this.pathsGroup_ = pieGroupSel.append('g')
         .attr('class', 'paths')
         .node();
     },

     get data() {
       return this.data_;
     },


     /**
      * @param {Data} Data for the chart, where data must be of the
      * form {category: str, name: str, (size: number or children: [])} .
      */
     set data(data) {
       this.data_ = data;
       this.updateContents_();
     },

     get margin() {
       var margin = {top: 0, right: 0, bottom: 0, left: 0};
       if (this.chartTitle_)
         margin.top += 40;
       return margin;
     },

     set selectedNodeID(id) {
       this.zoomToID_(id);
     },

     get selectedNodeID() {
       if (this.selectedNode_ != null)
         return this.selectedNode_.id;
       return null;
     },

     get selectedNode() {
       if (this.selectedNode_ != null)
         return this.selectedNode_;
       return null;
     },

     getMinSize: function() {
       if (!tr.b.ui.isElementAttachedToDocument(this))
         throw new Error('Cannot measure when unattached');
       this.updateContents_();

       var titleWidth = this.querySelector(
           '#title').getBoundingClientRect().width;
       var margin = this.margin;
       var marginWidth = margin.left + margin.right;
       var marginHeight = margin.top + margin.bottom;

       // TODO(vmiura): Calc this when we're done with layout.
       return {
         width: 600,
         height: 600
       };
     },

     getLegendKeys_: function() {
       // This class creates its own legend, instead of using ChartBase.
       return undefined;
     },

     updateScales_: function(width, height) {
       if (this.data_ === undefined)
         return;
     },

     // Interpolate the scales!
     arcTween_: function(minX, maxX, minY) {
       var that = this;
       var xd, yd, yr;

       if (minY > 0) {
         xd = d3.interpolate(that.xDomainScale_.domain(), [minX, maxX]);
         yd = d3.interpolate(
             that.yDomainScale_.domain(), [minY, that.yDomainMax_]);
         yr = d3.interpolate(that.yDomainScale_.range(), [50, that.radius_]);
       }
       else {
         xd = d3.interpolate(that.xDomainScale_.domain(), [minX, maxX]);
         yd = d3.interpolate(that.yDomainScale_.domain(),
                             [that.yDomainMin_, that.yDomainMax_]);
         yr = d3.interpolate(that.yDomainScale_.range(), [50, that.radius_]);
       }

       return function(d, i) {
         return i ? function(t) { return that.arc_(d); }
             : function(t) {
               that.xDomainScale_.domain(xd(t));
               that.yDomainScale_.domain(yd(t)).range(yr(t));
               return that.arc_(d);
             };
       };
     },

     getNodeById_: function(id) {
       if (!this.nodes_)
         return null;

       if (id < 0 || id > this.nodes_.length)
         return null;

       return this.nodes_[id];
     },

     zoomOut_: function() {
       window.history.back();
     },

     // This function assumes that, till the given depth,
     // the tree is linear. (i.e, a single string with no branches.)
     zoomToDepth: function(depth) {
       var node = this.data_.nodes;
       while (node.depth !== depth) {
         if (node.children.length !== 1)
           throw new Error('zoomToDepth requires the tree to be linear ' +
                           'till the specified depth.');
         node = node.children[0];
       }
       return this.zoomToID_(node.id);
     },

     zoomToID_: function(id) {
       var d = this.getNodeById_(id);

       if (d) {
         this.clickedY_ = d.y;
         this.minX_ = d.x;
         this.maxX_ = d.x + d.dx;
         this.minY_ = d.y;
       }
       else {
         this.clickedY_ = -1;
         this.minX_ = 0.0;
         this.maxX_ = 1.0;
         this.minY_ = 0.0;
       }

       this.selectedNode_ = d;
       this.redrawSegments_(this.minX_, this.maxX_, this.minY_);
       var path = this.vis_.selectAll('path');

       path.transition()
         .duration(750)
         .attrTween('d', this.arcTween_(this.minX_, this.maxX_, this.minY_));

       this.showBreadcrumbs_(d);

       var e = new Event('node-selected');
       e.node = d;
       this.dispatchEvent(e);
     },

     click_: function(d) {
       if (d3.event.shiftKey) {
         // Zoom partially onto the selected range
         var diff_x = (this.maxX_ - this.minX_) * 0.5;
         this.minX_ = d.x + d.dx * 0.5 - diff_x * 0.5;
         this.minX_ = this.minX_ < 0.0 ? 0.0 : this.minX_;
         this.maxX_ = this.minX_ + diff_x;
         this.maxX_ = this.maxX_ > 1.0 ? 1.0 : this.maxX_;
         this.minX_ = this.maxX_ - diff_x;

         this.selectedNode_ = d;
         this.redrawSegments_(this.minX_, this.maxX_, this.minY_);

         var path = this.vis_.selectAll('path');
         path.transition()
           .duration(750)
           .attrTween('d', this.arcTween_(this.minX_, this.maxX_, this.minY_));

         return;
       }

       this.selectedNodeID = d.id;

       var e = new Event('node-clicked');
       e.node = d;
       this.dispatchEvent(e);
     },

     // Given a node in a partition layout, return an array of all of its
     // ancestor nodes, highest first, but excluding the root.
     getAncestors_: function(node) {
       var path = [];
       var current = node;
       while (current.parent) {
         path.unshift(current);
         current = current.parent;
       }
       return path;
     },

     showBreadcrumbs_: function(d) {
       var sequenceArray = this.getAncestors_(d);

       // Fade all the segments.
       this.vis_.selectAll('path')
         .style('opacity', function(d) {
             return sequenceArray.indexOf(d) >= 0 ? 0.7 : 1.0;
           });

       var e = new Event('node-highlighted');
       e.node = d;
       this.dispatchEvent(e);

       //if (this.data_.onNodeHighlighted != undefined)
       //  this.data_.onNodeHighlighted(this, d);
     },

     mouseOver_: function(d) {
       this.showBreadcrumbs_(d);
     },

     // Restore everything to full opacity when moving off the
     // visualization.
     mouseLeave_: function(d) {
       var that = this;
       // Hide the breadcrumb trail
       if (that.selectedNode_ != null)
         that.showBreadcrumbs_(that.selectedNode_);
       else {
         // Deactivate all segments during transition.
         that.vis_.selectAll('path')
           .on('mouseover', null);

         // Transition each segment to full opacity and then reactivate it.
         that.vis_.selectAll('path')
           .transition()
           .duration(300)
           .style('opacity', 1)
           .each('end', function() {
               d3.select(that).on('mouseover', function(d) {
                 that.mouseOver_(d);
               });
             });
       }
     },

     // Update visible segments between new min/max ranges.
     redrawSegments_: function(minX, maxX, minY) {
       var that = this;
       var scale = maxX - minX;
       var visible_nodes = that.nodes_.filter(function(d) {
         return d.depth &&
             (d.y >= minY) &&
             (d.x < maxX) &&
             (d.x + d.dx > minX) &&
             (d.dx / scale > 0.001);
       });
       var path = that.vis_.data([that.data_.nodes]).selectAll('path')
         .data(visible_nodes, function(d) { return d.id; });

       path.enter().insert('svg:path')
         .attr('d', that.arc_)
         .attr('fill-rule', 'evenodd')
         .style('fill', function(dd) { return getColorOfKey(dd.category); })
         .style('opacity', 1.0)
         .on('mouseover', function(d) { that.mouseOver_(d); })
         .on('click', function(d) { that.click_(d); });

       path.exit().remove();
       return path;
     },

     updateContents_: function() {
       ChartBase.prototype.updateContents_.call(this);
       if (!this.data_)
         return;

       var that = this;

       // Partition data into d3 nodes.
       var partition = d3.layout.partition()
           .size([1, 1])
           .value(function(d) { return d.size; });
       that.nodes_ = partition.nodes(that.data_.nodes);

       // Allocate an id to each node.  Gather all categories.
       var categoryDict = {};
       that.nodes_.forEach(function f(d, i) {
         d.id = i;
         categoryDict[d.category] = null;
       });

       // Create legend.
       var li = {
         w: 85, h: 20, s: 3, r: 3
       };

       var legend = that.legendSel_.append('svg:svg')
           .attr('width', li.w)
           .attr('height', d3.keys(categoryDict).length * (li.h + li.s));

       var g = legend.selectAll('g')
           .data(d3.keys(categoryDict))
           .enter().append('svg:g')
           .attr('transform', function(d, i) {
             return 'translate(0,' + i * (li.h + li.s) + ')';
           });

       g.append('svg:rect')
           .attr('rx', li.r)
           .attr('ry', li.r)
           .attr('width', li.w)
           .attr('height', li.h)
           .style('fill', function(d) { return getColorOfKey(d); });

       g.append('svg:text')
           .attr('x', li.w / 2)
           .attr('y', li.h / 2)
           .attr('dy', '0.35em')
           .attr('text-anchor', 'middle')
           .attr('fill', '#fff')
           .attr('font-size', '12px')
           .text(function(d) { return d; });

       // Create sunburst visualization.
       var width = that.chartAreaSize.width;
       var height = that.chartAreaSize.height;
       that.radius_ = Math.max(MIN_RADIUS, Math.min(width, height) / 2);

       d3.select(that.pieGroup_).attr(
           'transform',
           'translate(' + width / 2 + ',' + height / 2 + ')');

       that.selectedNode_ = null;

       var depth = 1.0 + d3.max(that.nodes_, function(d) { return d.depth; });
       that.yDomainMin_ = 1.0 / depth;
       that.yDomainMax_ = Math.min(Math.max(depth, 20), 50) / depth;

       that.xDomainScale_ = d3.scale.linear()
           .range([0, 2 * Math.PI]);

       that.yDomainScale_ = d3.scale.sqrt()
           .domain([that.yDomainMin_, that.yDomainMax_])
           .range([50, that.radius_]);

       that.arc_ = d3.svg.arc()
           .startAngle(function(d) {
             return Math.max(0, Math.min(2 * Math.PI, that.xDomainScale_(d.x)));
           })
           .endAngle(function(d) {
             return Math.max(0,
                 Math.min(2 * Math.PI, that.xDomainScale_(d.x + d.dx)));
           })
           .innerRadius(function(d) {
             return Math.max(0, that.yDomainScale_((d.y)));
           })
           .outerRadius(function(d) {
             return Math.max(0, that.yDomainScale_((d.y + d.dy)));
           });


       // Bounding circle underneath the sunburst, to make it easier to detect
       // when the mouse leaves the parent g.
       that.backSel_.append('svg:circle')
           .attr('r', that.radius_)
           .style('opacity', 0.0)
           .on('click', function() { that.zoomOut_(); });


       that.vis_ = d3.select(that.pathsGroup_);
       that.selectedNodeID = 0;
       that.vis_.on('mouseleave', function(d) { that.mouseLeave_(d); });
     },

     updateHighlight_: function() {
       ChartBase.prototype.updateHighlight_.call(this);
       // Update color of pie segments.
       var pathsGroupSel = d3.select(this.pathsGroup_);
       var that = this;
       pathsGroupSel.selectAll('.arc').each(function(d, i) {
         var origData = that.data_[i];
         var highlighted = origData.label == that.currentHighlightedLegendKey;
         var color = getColorOfKey(origData.label, highlighted);
         this.style.fill = getColorOfKey(origData.label, highlighted);
       });
     }
   };

   return {
     SunburstChart: SunburstChart
   };
 });
 </script>
	<!DOCTYPE html>
	<!--
	Copyright (c) 2014 The Chromium Authors. All rights reserved.
	Use of this source code is governed by a BSD-style license that can be
	found in the LICENSE file.
	-->
	<link rel="import" href="/base/range.html">
	<link rel="import" href="/base/ui/d3.html">
	<link rel="import" href="/base/ui/dom_helpers.html">
	<link rel="import" href="/base/ui/chart_base.html">
	<link rel="stylesheet" href="/base/ui/sunburst_chart.css">
	<script>
	'use strict';

	tr.exportTo('tr.b.ui', function() {
	var ChartBase = tr.b.ui.ChartBase;
	var getColorOfKey = tr.b.ui.getColorOfKey;

	var MIN_RADIUS = 100;

	/**
	* @constructor
	*/
	var SunburstChart = tr.b.ui.define('sunburst-chart', ChartBase);

	SunburstChart.prototype = {
	__proto__: ChartBase.prototype,

	decorate: function() {
	ChartBase.prototype.decorate.call(this);
	this.classList.add('sunburst-chart');

	this.data_ = undefined;
	this.seriesKeys_ = undefined;

	this.yDomainMin_ = 0.0;
	this.yDomainMax_ = 0.0;
	this.xDomainScale_ = undefined;
	this.yDomainScale_ = undefined;
	this.radius_ = undefined;
	this.arc_ = undefined;
	this.selectedNode_ = null;
	this.vis_ = undefined;
	this.nodes_ = undefined;
	this.minX_ = 0.0;
	this.maxX_ = 1.0;
	this.minY_ = 0.0;
	this.clickedY_ = 0;

	var chartAreaSel = d3.select(this.chartAreaElement);
	this.legendSel_ = chartAreaSel.append('g');

	var pieGroupSel = chartAreaSel.append('g')
	.attr('class', 'pie-group');
	this.pieGroup_ = pieGroupSel.node();

	this.backSel_ = pieGroupSel.append('g');


	this.pathsGroup_ = pieGroupSel.append('g')
	.attr('class', 'paths')
	.node();
	},

	get data() {
	return this.data_;
	},


	/**
	* @param {Data} Data for the chart, where data must be of the
	* form {category: str, name: str, (size: number or children: [])} .
	*/
	set data(data) {
	this.data_ = data;
	this.updateContents_();
	},

	get margin() {
	var margin = {top: 0, right: 0, bottom: 0, left: 0};
	if (this.chartTitle_)
	margin.top += 40;
	return margin;
	},

	set selectedNodeID(id) {
	this.zoomToID_(id);
	},

	get selectedNodeID() {
	if (this.selectedNode_ != null)
	return this.selectedNode_.id;
	return null;
	},

	get selectedNode() {
	if (this.selectedNode_ != null)
	return this.selectedNode_;
	return null;
	},

	getMinSize: function() {
	if (!tr.b.ui.isElementAttachedToDocument(this))
	throw new Error('Cannot measure when unattached');
	this.updateContents_();

	var titleWidth = this.querySelector(
	'#title').getBoundingClientRect().width;
	var margin = this.margin;
	var marginWidth = margin.left + margin.right;
	var marginHeight = margin.top + margin.bottom;

	// TODO(vmiura): Calc this when we're done with layout.
	return {
	width: 600,
	height: 600
	};
	},

	getLegendKeys_: function() {
	// This class creates its own legend, instead of using ChartBase.
	return undefined;
	},

	updateScales_: function(width, height) {
	if (this.data_ === undefined)
	return;
	},

	// Interpolate the scales!
	arcTween_: function(minX, maxX, minY) {
	var that = this;
	var xd, yd, yr;

	if (minY > 0) {
	xd = d3.interpolate(that.xDomainScale_.domain(), [minX, maxX]);
	yd = d3.interpolate(
	that.yDomainScale_.domain(), [minY, that.yDomainMax_]);
	yr = d3.interpolate(that.yDomainScale_.range(), [50, that.radius_]);
	}
	else {
	xd = d3.interpolate(that.xDomainScale_.domain(), [minX, maxX]);
	yd = d3.interpolate(that.yDomainScale_.domain(),
	[that.yDomainMin_, that.yDomainMax_]);
	yr = d3.interpolate(that.yDomainScale_.range(), [50, that.radius_]);
	}

	return function(d, i) {
	return i ? function(t) { return that.arc_(d); }
	: function(t) {
	that.xDomainScale_.domain(xd(t));
	that.yDomainScale_.domain(yd(t)).range(yr(t));
	return that.arc_(d);
	};
	};
	},

	getNodeById_: function(id) {
	if (!this.nodes_)
	return null;

	if (id < 0 \|\| id > this.nodes_.length)
	return null;

	return this.nodes_[id];
	},

	zoomOut_: function() {
	window.history.back();
	},

	// This function assumes that, till the given depth,
	// the tree is linear. (i.e, a single string with no branches.)
	zoomToDepth: function(depth) {
	var node = this.data_.nodes;
	while (node.depth !== depth) {
	if (node.children.length !== 1)
	throw new Error('zoomToDepth requires the tree to be linear ' +
	'till the specified depth.');
	node = node.children[0];
	}
	return this.zoomToID_(node.id);
	},

	zoomToID_: function(id) {
	var d = this.getNodeById_(id);

	if (d) {
	this.clickedY_ = d.y;
	this.minX_ = d.x;
	this.maxX_ = d.x + d.dx;
	this.minY_ = d.y;
	}
	else {
	this.clickedY_ = -1;
	this.minX_ = 0.0;
	this.maxX_ = 1.0;
	this.minY_ = 0.0;
	}

	this.selectedNode_ = d;
	this.redrawSegments_(this.minX_, this.maxX_, this.minY_);
	var path = this.vis_.selectAll('path');

	path.transition()
	.duration(750)
	.attrTween('d', this.arcTween_(this.minX_, this.maxX_, this.minY_));

	this.showBreadcrumbs_(d);

	var e = new Event('node-selected');
	e.node = d;
	this.dispatchEvent(e);
	},

	click_: function(d) {
	if (d3.event.shiftKey) {
	// Zoom partially onto the selected range
	var diff_x = (this.maxX_ - this.minX_) * 0.5;
	this.minX_ = d.x + d.dx * 0.5 - diff_x * 0.5;
	this.minX_ = this.minX_ < 0.0 ? 0.0 : this.minX_;
	this.maxX_ = this.minX_ + diff_x;
	this.maxX_ = this.maxX_ > 1.0 ? 1.0 : this.maxX_;
	this.minX_ = this.maxX_ - diff_x;

	this.selectedNode_ = d;
	this.redrawSegments_(this.minX_, this.maxX_, this.minY_);

	var path = this.vis_.selectAll('path');
	path.transition()
	.duration(750)
	.attrTween('d', this.arcTween_(this.minX_, this.maxX_, this.minY_));

	return;
	}

	this.selectedNodeID = d.id;

	var e = new Event('node-clicked');
	e.node = d;
	this.dispatchEvent(e);
	},

	// Given a node in a partition layout, return an array of all of its
	// ancestor nodes, highest first, but excluding the root.
	getAncestors_: function(node) {
	var path = [];
	var current = node;
	while (current.parent) {
	path.unshift(current);
	current = current.parent;
	}
	return path;
	},

	showBreadcrumbs_: function(d) {
	var sequenceArray = this.getAncestors_(d);

	// Fade all the segments.
	this.vis_.selectAll('path')
	.style('opacity', function(d) {
	return sequenceArray.indexOf(d) >= 0 ? 0.7 : 1.0;
	});

	var e = new Event('node-highlighted');
	e.node = d;
	this.dispatchEvent(e);

	//if (this.data_.onNodeHighlighted != undefined)
	// this.data_.onNodeHighlighted(this, d);
	},

	mouseOver_: function(d) {
	this.showBreadcrumbs_(d);
	},

	// Restore everything to full opacity when moving off the
	// visualization.
	mouseLeave_: function(d) {
	var that = this;
	// Hide the breadcrumb trail
	if (that.selectedNode_ != null)
	that.showBreadcrumbs_(that.selectedNode_);
	else {
	// Deactivate all segments during transition.
	that.vis_.selectAll('path')
	.on('mouseover', null);

	// Transition each segment to full opacity and then reactivate it.
	that.vis_.selectAll('path')
	.transition()
	.duration(300)
	.style('opacity', 1)
	.each('end', function() {
	d3.select(that).on('mouseover', function(d) {
	that.mouseOver_(d);
	});
	});
	}
	},

	// Update visible segments between new min/max ranges.
	redrawSegments_: function(minX, maxX, minY) {
	var that = this;
	var scale = maxX - minX;
	var visible_nodes = that.nodes_.filter(function(d) {
	return d.depth &&
	(d.y >= minY) &&
	(d.x < maxX) &&
	(d.x + d.dx > minX) &&
	(d.dx / scale > 0.001);
	});
	var path = that.vis_.data([that.data_.nodes]).selectAll('path')
	.data(visible_nodes, function(d) { return d.id; });

	path.enter().insert('svg:path')
	.attr('d', that.arc_)
	.attr('fill-rule', 'evenodd')
	.style('fill', function(dd) { return getColorOfKey(dd.category); })
	.style('opacity', 1.0)
	.on('mouseover', function(d) { that.mouseOver_(d); })
	.on('click', function(d) { that.click_(d); });

	path.exit().remove();
	return path;
	},

	updateContents_: function() {
	ChartBase.prototype.updateContents_.call(this);
	if (!this.data_)
	return;

	var that = this;

	// Partition data into d3 nodes.
	var partition = d3.layout.partition()
	.size([1, 1])
	.value(function(d) { return d.size; });
	that.nodes_ = partition.nodes(that.data_.nodes);

	// Allocate an id to each node. Gather all categories.
	var categoryDict = {};
	that.nodes_.forEach(function f(d, i) {
	d.id = i;
	categoryDict[d.category] = null;
	});

	// Create legend.
	var li = {
	w: 85, h: 20, s: 3, r: 3
	};

	var legend = that.legendSel_.append('svg:svg')
	.attr('width', li.w)
	.attr('height', d3.keys(categoryDict).length * (li.h + li.s));

	var g = legend.selectAll('g')
	.data(d3.keys(categoryDict))
	.enter().append('svg:g')
	.attr('transform', function(d, i) {
	return 'translate(0,' + i * (li.h + li.s) + ')';
	});

	g.append('svg:rect')
	.attr('rx', li.r)
	.attr('ry', li.r)
	.attr('width', li.w)
	.attr('height', li.h)
	.style('fill', function(d) { return getColorOfKey(d); });

	g.append('svg:text')
	.attr('x', li.w / 2)
	.attr('y', li.h / 2)
	.attr('dy', '0.35em')
	.attr('text-anchor', 'middle')
	.attr('fill', '#fff')
	.attr('font-size', '12px')
	.text(function(d) { return d; });

	// Create sunburst visualization.
	var width = that.chartAreaSize.width;
	var height = that.chartAreaSize.height;
	that.radius_ = Math.max(MIN_RADIUS, Math.min(width, height) / 2);

	d3.select(that.pieGroup_).attr(
	'transform',
	'translate(' + width / 2 + ',' + height / 2 + ')');

	that.selectedNode_ = null;

	var depth = 1.0 + d3.max(that.nodes_, function(d) { return d.depth; });
	that.yDomainMin_ = 1.0 / depth;
	that.yDomainMax_ = Math.min(Math.max(depth, 20), 50) / depth;

	that.xDomainScale_ = d3.scale.linear()
	.range([0, 2 * Math.PI]);

	that.yDomainScale_ = d3.scale.sqrt()
	.domain([that.yDomainMin_, that.yDomainMax_])
	.range([50, that.radius_]);

	that.arc_ = d3.svg.arc()
	.startAngle(function(d) {
	return Math.max(0, Math.min(2 * Math.PI, that.xDomainScale_(d.x)));
	})
	.endAngle(function(d) {
	return Math.max(0,
	Math.min(2 * Math.PI, that.xDomainScale_(d.x + d.dx)));
	})
	.innerRadius(function(d) {
	return Math.max(0, that.yDomainScale_((d.y)));
	})
	.outerRadius(function(d) {
	return Math.max(0, that.yDomainScale_((d.y + d.dy)));
	});


	// Bounding circle underneath the sunburst, to make it easier to detect
	// when the mouse leaves the parent g.
	that.backSel_.append('svg:circle')
	.attr('r', that.radius_)
	.style('opacity', 0.0)
	.on('click', function() { that.zoomOut_(); });


	that.vis_ = d3.select(that.pathsGroup_);
	that.selectedNodeID = 0;
	that.vis_.on('mouseleave', function(d) { that.mouseLeave_(d); });
	},

	updateHighlight_: function() {
	ChartBase.prototype.updateHighlight_.call(this);
	// Update color of pie segments.
	var pathsGroupSel = d3.select(this.pathsGroup_);
	var that = this;
	pathsGroupSel.selectAll('.arc').each(function(d, i) {
	var origData = that.data_[i];
	var highlighted = origData.label == that.currentHighlightedLegendKey;
	var color = getColorOfKey(origData.label, highlighted);
	this.style.fill = getColorOfKey(origData.label, highlighted);
	});
	}
	};

	return {
	SunburstChart: SunburstChart
	};
	});
	</script>