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">
    <button ng-click="loadData()">Load</button>
    <svg linear-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.data = undefined;
    $scope.loadData = function () {
        $scope.data = {
            "name": "flare",
                "children": [{
                "name": "analytics",
                    "children": [{
                    "name": "cluster",
                        "children": [{
                        "name": "AgglomerativeCluster",
                        "size": 3938
                    }, {
                        "name": "CommunityStructure",
                        "size": 3812
                    }, {
                        "name": "HierarchicalCluster",
                        "size": 6714
                    }, {
                        "name": "MergeEdge",
                        "size": 743
                    }]
                }, {
                    "name": "graph",
                        "children": [{
                        "name": "BetweennessCentrality",
                        "size": 3534
                    }, {
                        "name": "LinkDistance",
                        "size": 5731
                    }, {
                        "name": "MaxFlowMinCut",
                        "size": 7840
                    }, {
                        "name": "ShortestPaths",
                        "size": 5914
                    }, {
                        "name": "SpanningTree",
                        "size": 3416
                    }]
                }, {
                    "name": "optimization",
                        "children": [{
                        "name": "AspectRatioBanker",
                        "size": 7074
                    }]
                }]
            }]
        };
    }
}]);
app.directive('linearChart', function () {
    return {
        restrict: 'EA',

        link: function (scope, elem, attrs) {
            //this will watch the scope data
     ...