D3 pie chart with text overlapping deduction and dom event binding, by Paul Lan

by Paul Lan

HTML

<h1>D3 pie chart with text overlapping deduction and dom event binding, by Paul Lan<h1/>

JavaScript

/**
 * With this demo, you are able to get the idea of transition and intepolate with D3
 */

// the 3 sets of data we would like to visualize
var data = [1, 1, 1, 6, 7, 8, 5, 5, 20, 25, 9, 8, 2, 2, 2, 20];

var theStatusNameMapping = ['Running', 'Stopping', 'Paused', 'Halt', 'Terminated', 'Stopped', 'Bootstraping', 'InSync', 'Out-Of-Sync', 'Impaired', 'Degraded', 'Unreachabled', 'Destroyed', 'Error1', 'Error2', 'Error3', 'Error4']
var dataScaleName = d3.scale.ordinal()
  .range(theStatusNameMapping)

var arcOuterRadius = 130;
var arcTextOffsetTimes = 1.3;
var textMinSpaceHeight = 13;
var charMinSpaceWidth = 10; // px

var pathStrokeWidth = 5;

// surely, create a svg workspace first
var theSvgG = d3.select('body').append('svg').attr({
  width: 600,
  height: 600
}).append('g').attr('transform', 'translate(300, 300)');

// the color of the 3 annuluses we will assign later
var colorScale = d3.scale.category20();

var pieLayoutData = d3.layout.pie().sort(null);


// the arc Path d generator
var arc = d3.svg.arc()
  .innerRadius(100)
  .outerRadius(arcOuterRadius)

// we will generate startAngle value based on last sector's endAngle
  .startAngle(function (d, index) {
    return d.startAngle
  })

// its startAngle + its radian = its endAngle
  .endAngle(function (d, index) {

    return d.endAngle


  });

// our main utils/data handler class

var DataHandler = function () {

  // let's follow CommonJS a little bit
  var exports = this;
  
  exports.data = [];
  var percentageOfCircle = [];
  var endAngleOf = [];



  var updateDatum = function (datum, attr, newValue) {
    datum[attr] = newValue;
  }

  var pieData = function (i, value) {
    if (typeof value === 'undefined') {
      return exports.data [i];
    }
    exports.data [i] = value;
  }

  // sum the array elements as a single circle radian
  var sumData = function(){
    return exports.data .reduce(function (a, b) {
      return a + b;
    });
  }



  /**
   * percentage of each array element
   *...