Java, Web and Mobile

Blog

Integration of D3 in AngularJS Applications

|
JavaScript

AngularJS

To realize more complex web applications, the model view controller software pattern is state of the art. JavaScript frameworks, which base on several forms of that pattern, have increased in the last years. AngularJs developed by Google is one of the most famous. Angular, available in Version 1.5 at the moment is using technologies as dependency injection already known from Java. Another feature of AngularJs is the possibility to develop own elements with special behavior, named as directives. So it’s relatively easy to develop reusable components, which you can add to HTML views of the application easily.

D3.js

The focus of the D3.js library I introduced in may last blog post, is the visualization of data. With D3 you could develop less whole applications, but custom charts and graphs, in opposite to Angular D3 is not using the MVC architecture. Similar to jQuery in D3 you create selectors to select and append DOM elements. Likewise, in Angular, D3 has databinding. So it’s possible to manipulate the DOM on base of data. How you can use the best of two worlds in one application, you can read in the post below.

Integration of D3 to Angular

To use D3 charts in the context of Angular you have to integrate the D3 library to the Angular application. Here you should have a look to current Angular coding conventions. I think the best solution is to integrate D3 as an Angular factory service.

After that the D3 factory is present through dependency injection where it’s needed. To create a first chart inside the Angular application the best way is a directive, which contains the needed D3 logic and also the creation of SVG elements with DOM manipulation.

Use AngularJS databinding

Because both libraries are using databinding, you have to decide where the data you use in the chart should come from. Due to the fact that data in Angular applications is integrated through a REST interface, and after that processed by several Angular services, it makes sense at this point to provide the data for the chart with Angular. Because a directive should be generic and reusable it’s better to use the Angular way at this point. So, data is available through the current scope of the controller and you can pass it to the directive as an attribute. An implementation is shown in the following code example.

The controller contains two variables, which contain the data and an array with colors to style the chart.

In the view you only use the name of the directive as an HTML element. The data defined in the controller is passed to the directive as attribute. In the second attribute you can pass an array with colors to the chart.

Chart directives

The logic of the chart is standing in the directive. Through dependency injection you can use the D3 service in the directive. D3 is now present through the D3 variable. This behavior and the attributes of the directive are set in the return statement at the beginning of the directive code. Here the attributes color and data are defined too, where you can pass the data from the controller later. The chart itself gets created in the link function of the directive. Here the SVG is created and a watcher to the data variable is set if the data changes. The watcher is calling the renderChart() method and the chart will be updated. Inside the render Chart method, you find the creation of the SVG elements.

balkenChart

Summary

D3 is extending Angular through cool features to visualize data. Through directives you can create reusable charts with Angular databinding easily. Inside the directive you can use all D3 functions. With a watcher on the data variable you can realize two-way databinding easily. So it’s possible for example to let the chart react to user input. To give a good user experience, you can extend these charts with animations.