Using D3 charts with AngularJS

Table of contents

Reading Time: 3 minutes

In this blog, we will learn using D3 chart with AngularJS. We will use D3 by injecting it in our angular application.

Introduction of D3 Chart:- D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

For more details click here

Step 1: Create index.html, directive.js, controller.js, app.js files

First of all we need to understand the role of all file.

index.html is needed for rendering chart.
app.js is needed for using angular application.
controller.js is for angular controller.
directive.js is for angular directive.

Once we have created all files, we need to use it in index.html.

<script type="text/javascript" src=../js/Angular.min.js></script>
//Here Angular.min.js is used for AngularJs.
<script type="text/javascript" src="../js/app.js" ></script>
<script type="text/javascript" src="../js/controllers/controller.js" ></script>
<script type="text/javascript" src="../js/directive/directive.js" ></script>

Step 2: Create D3.js file to inject in our application

we need d3.min.js file to use for our angular application. we will wrap it as a factory method angular module. you can get d3.min.js file from this Link.

Now we will create a new file d3.js. and write the following code in it. Or you can take it from my repository.

(function () {
  'use strict';
  angular.module('d3')
    .factory('d3',[function(){
      var d3;
       d3 = //paste whole d3.min.js file over here.
      return d3;
    }]);
}());

and then use it in index.html file. like this

<script type="text/javascript" src="../js/d3.js" ></script>

Step 3: Create angular module in app.js file.

we need to create angular app in this file which will help us to use directive and controller.

we will create app with the name ‘d3App’ by using the following code:

(function() {
'use strict';
angular.module('d3App', [ ]);
}());

Now our app ‘d3App’ is created.

Step 4: Create controller in controller.js file.

The following code will be written for creating a controller for our app ‘d3App’.

(function() {
'use strict';
   angular.module('d3App.controllers')
    .controller('d3Controller',[ '$scope', function($scope) {
           $scope.title = "Line Chart Using AngularJS with D3.";
     }]);
}());

Step 5: Create the chart in directive.js file.

This directive contains the whole code of the chart. the manipulation in this file will directly affect the chart. we have to create a separate module called ‘d3App.directives’ and a directive called ‘d3Lines’.

The module of d3.js file will be injected in this directive that’s how we will be able to use D3 in our application. the dependency injection will be done by the following code:

(function() {
'use strict';

angular.module('d3App.directives')
  .directive('d3Lines',['d3',function(d3) {
                       return {
                           restrict : 'EA',
                           link : function(scope) {
                             //your code for chart.
                            };
                       };
   }]);
}());

Note: The directive ‘d3Lines’ will be used as ‘<d3-lines></d3-lines>’ in index.html. The detailed code is here.

Now we have to inject the directive and controller in our angular app ‘d3App’ by using the following code:

(function() {
'use strict';
    angular.module('d3App', [ 'd3App.controllers', 'd3App.directives' ]);
    angular.module('d3', []);
    angular.module('d3App.controllers', []);
    angular.module('d3App.directives', [ 'd3' ]);
}());

Step 6: Use directive in index.html file.

We have created the controller & directive and now we have to use it in index.html file to show it in the page. For that we need the following code:

<body data-ng-app="d3App"> //creating an app
    <div data-ng-controller="d3Controller as ctrl"> //setting an alias
      <span ng-show='title'>{{title}}</span> //showing the title of graph
      <d3-lines></d3-lines> //using the directive
    </div>
</body>