AngularJS + D3

by Rishabh Sharma

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.js"></script>
<div ng-controller="MyCtrl">
  <waterfall></waterfall>
</div>

CSS

// CHART CSS below
.bar.total rect,
.bar.bar-first rect {
  fill: rgb(0, 172, 234);
}

.bar.bar-middle rect {
  fill: rgb(165, 223, 245)
}


/*.bar.positive rect {
    fill: darkolivegreen;
}

.bar.negative rect {
    fill: crimson;
}*/

.bar line.connector {
  stroke: grey;
  stroke-dasharray: 3;
}

.bar text {
  fill: white;
  font: 12px sans-serif;
  text-anchor: middle;
}

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {

});

myApp.directive('waterfall', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      items: '='
    },
    template: "<svg class='chart'></svg>",
    link: function(scope, element, attrs, fn) {

      var d3 = $window.d3;

      var rawSvg = element;

      var totalData = {
        inc: [{
          id: 1,
          name: "LY",
          value: 4622440.27,
          base: 4622440.27
        }, {
          id: 2,
          name: "P",
          value: -217346.61,
          base: -217346.61
        }, {
          id: 3,
          name: "I",
          value: -200815.21,
          base: -200815.21
        }, {
          id: 4,
          name: "D",
          value: -753324.53,
          base: -753324.53
        }],
        ctgr: [{
          id: 1,
          name: "LY",
          value: 4622440.27,
          base: 4622440.27
        }, {
          id: 2,
          name: "P",
          value: -0.047,
          base: -217346.61
        }, {
          id: 3,
          name: "I",
          value: -0.043,
          base: -200815.21
        }, {
          id: 4,
          name: "D",
          value: -0.16,
          base: -753324.53
        }],
        ctg: [{
          id: 1,
          name: "LY",
          value: 4622440.27,
          base: 4622440.27
        }, {
          id: 2,
          name: "P",
          value: 0.185,
          base: -217346.61
        }, {
          id: 3,
          name: "I",
          value: 0.171,
          base: -200815.21
        }, {
          id: 4,
          name: "D",
          value: 0.643,
          base: -753324.53
        }]
      };

      var data = totalData.inc;

      //scope.$watch('waterfallData', function(newValue, oldValue) {
      //console.log(newValue[1].value, newValue[2].value, newValue[3].value);
      //data = newValue;
      //});

      var margin = {
          top: 30,
          right: 0,
         ...