D3, the javascript library for manipulating document-based data is insanely expressive and helps bring data to life through HTML, SVG, and CSS. It has a large, growing community and there are tons of examples for what can be done with it.
Combining the power of D3 and Angular can be challenging and confusing. We constantly get asked how to integrate the two in our classes. In this post, we aim to clear the confusion and bring you the best documentation on how to integrate AngularJS and D3.
The Angular way of integrating D3 into AngularJS is by using a directive. If you’re not familiar with directives, they are Angular’s way of extending the functionality of HTML. They are, at their core functions that are executed on a DOM element that give the element functionality. All tags in AngularJS are directives. For more information, see our post about how to Build custom directives with AngularJS.
* Using d3 with dependency injection
* Creating our first basic d3 directive
* Data binding to the svg
* Handling click events
* Dynamic data over XHR
* Extending your own d3 directives
Your new post is loading...