AngularJS Live Example

by Sajeetharan Sinnathurai

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<div ng-app='myApp' ng-controller="myController">
  <svg sunburst-chart></svg>
</div>

CSS

.node circle {
  cursor: pointer;
  stroke: #3182bd;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
  pointer-events: none;
  text-anchor: middle;
}

line.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

JavaScript

var app = angular.module('myApp', []);
app.controller('myController', ['$scope', function($scope) {
  //setting the data in the scope
	$scope.data1 = undefined;
  function mockAnAjaxCall() {
    window.setTimeout(function() {
		  console.log("s", $scope.data1)
      $scope.data1 = {
        "name": "Root",
        "children": [{
          "name": "A1",
          "children": [{
            "name": "B1",
            "size": 30
          }, {
            "name": "B2",
            "size": 40
          }, {
            "name": "B3",
            "children": [{
              "name": "C1",
              "size": 10
            }, {
              "name": "C2",
              "size": 15
            }]
          }]
        }, {
          "name": "A2",
          "children": [{
            "name": "B4",
            "size": 40
          }, {
            "name": "B5",
            "size": 30
          }, {
            "name": "B6",
            "size": 10
          }]
        }, {
          "name": "A3",
          "children": [{
              "name": "B7",
              "size": 50
            }, {
              "name": "B8",
              "size": 15
            }

          ]
        }]
      };
			$scope.$apply();
    }, 3000);
  }
  
	mockAnAjaxCall();
}]);
app.directive('sunburstChart', function() {
  return {
    restrict: 'EA',

    link: function(scope, elem, attrs) {
      //this will watch the scope data
      scope.$watch(
        "data1",
        function handleChange(root, oldValue) {
					console.log(scope.data1)
          if (!root) {
            return;
          }
          var width = 500,
            height = 500,
            radius = Math.min(width, height) / 2;

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

          var y = d3.scale.sqrt()
            .range([0, radius]);

          var color = d3.scale.category10();
          console.log("s", elem)
          var svg = d3.selectAll(elem)
            .attr("width", width)
           ...