src/bilevel-sunburst.js
function() {

            var self = this;

            // calculate the location and offset.

            // the largest rectangle that can be inscribed in a 
            // circle is a square.

            // calculate the offset for the center of the chart.
            var offset = $('#' + self.getGenericId('svg')).offset();
            var top = offset['top'] + self.options.diameter / 2;
            var left = offset['left'] + self.options.diameter / 2;

            // the center circle's the diameter is a third of the 
            // self.options.diameter.
            var centerRadius = self.options.diameter / 6;
            var squareX = Math.sqrt(centerRadius * centerRadius / 2);

            // top and left for the explanation div.
            top = top - squareX;
            left = left - squareX - 25;

            // the main explanation div.
            $('#' + self.getGenericId('explanation'))
              .css('position', 'absolute')
              .css('text-align', 'center')
              // The z-index property specifies the z-order of a 
              // positioned element and its descendants. 
              // When elements overlap, z-order determines 
              // which one covers the other. 
              // An element with a larger z-index 
              // generally covers an element with a lower one.
              // FIXME: seems we need use class to utilize the 
              // -1 z-index, which will help position 
              // the explanation div under the circle.
              .css('z-index', '-1')
              // it turns out the bootstrap panel has something
              // to do with the z-index.
              // In general the z-index should work fine.
              //.attr('class', 'bs-explanation')
              // set the border, most time is for debugging..
              .css('border', '0px solid black')
              .css('width', '180px')
              .css('top', top + 'px')
              .css('left', left + 'px');

            $('#' + self.getGenericId('pageviews'))
              .css('font-size', '2.5em')
              .css('color', '#316395');

            $('#' + self.getGenericId('percentage'))
              .css('font-size', '1.5em')
              .css('color', '#316395');

            $('#' + self.getGenericId('date'))
              .css('font-weight', 'bold');

            $('#' + self.getGenericId('group'))
              .css('font-weight', 'bold');
        }
function() {

            var self = this;

            // calculate the location and offset.

            // the largest rectangle that can be inscribed in a 
            // circle is a square.

            // calculate the offset for the center of the chart.
            var offset = $('#' + self.getGenericId('svg')).offset();
            var top = offset['top'] + self.options.diameter / 2;
            var left = offset['left'] + self.options.diameter / 2;

            // the center circle's the diameter is a third of the 
            // self.options.diameter.
            var centerRadius = self.options.diameter / 6;
            var squareX = Math.sqrt(centerRadius * centerRadius / 2);

            // top and left for the explanation div.
            top = top - squareX;
            left = left - squareX - 25;

            // the main explanation div.
            $('#' + self.getGenericId('explanation'))
              .css('position', 'absolute')
              .css('text-align', 'center')
              // The z-index property specifies the z-order of a 
              // positioned element and its descendants. 
              // When elements overlap, z-order determines 
              // which one covers the other. 
              // An element with a larger z-index 
              // generally covers an element with a lower one.
              // FIXME: seems we need use class to utilize the 
              // -1 z-index, which will help position 
              // the explanation div under the circle.
              .css('z-index', '-1')
              // it turns out the bootstrap panel has something
              // to do with the z-index.
              // In general the z-index should work fine.
              //.attr('class', 'bs-explanation')
              // set the border, most time is for debugging..
              .css('border', '0px solid black')
              .css('width', '180px')
              .css('top', top + 'px')
              .css('left', left + 'px');

            $('#' + self.getGenericId('pageviews'))
              .css('font-size', '2.5em')
              .css('color', '#316395');

            $('#' + self.getGenericId('percentage'))
              .css('font-size', '1.5em')
              .css('color', '#316395');

            $('#' + self.getGenericId('date'))
              .css('font-weight', 'bold');

            $('#' + self.getGenericId('group'))
              .css('font-weight', 'bold');
        }
function ( ) { var self = this ; // calculate the location and offset. // the largest rectangle that can be inscribed in a  // circle is a square. // calculate the offset for the center of the chart. var offset = $ ( '#' + self . getGenericId ( 'svg' ) ) . offset ( ) ; var top = offset [ 'top' ] + self . options . diameter / 2 ; var left = offset [ 'left' ] + self . options . diameter / 2 ; // the center circle's the diameter is a third of the  // self.options.diameter. var centerRadius = self . options . diameter / 6 ; var squareX = Math . sqrt ( centerRadius * centerRadius / 2 ) ; // top and left for the explanation div. top = top - squareX ; left = left - squareX - 25 ; // the main explanation div. $ ( '#' + self . getGenericId ( 'explanation' ) ) . css ( 'position' , 'absolute' ) . css ( 'text-align' , 'center' ) // The z-index property specifies the z-order of a  // positioned element and its descendants.  // When elements overlap, z-order determines  // which one covers the other.  // An element with a larger z-index  // generally covers an element with a lower one. // FIXME: seems we need use class to utilize the  // -1 z-index, which will help position  // the explanation div under the circle. . css ( 'z-index' , '-1' ) // it turns out the bootstrap panel has something // to do with the z-index. // In general the z-index should work fine. //.attr('class', 'bs-explanation') // set the border, most time is for debugging.. . css ( 'border' , '0px solid black' ) . css ( 'width' , '180px' ) . css ( 'top' , top + 'px' ) . css ( 'left' , left + 'px' ) ; $ ( '#' + self . getGenericId ( 'pageviews' ) ) . css ( 'font-size' , '2.5em' ) . css ( 'color' , '#316395' ) ; $ ( '#' + self . getGenericId ( 'percentage' ) ) . css ( 'font-size' , '1.5em' ) . css ( 'color' , '#316395' ) ; $ ( '#' + self . getGenericId ( 'date' ) ) . css ( 'font-weight' , 'bold' ) ; $ ( '#' + self . getGenericId ( 'group' ) ) . css ( 'font-weight' , 'bold' ) ; }
apply styles for the explanation div.
this should happen after we have the location and offset
of the svg.
apply styles for the explanation div . this should happen after we have the location and offset of the svg .