AngularJS & D3: Directives for Visualizations
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about wrapping D3 charts in Angular directives, reusing charts, and integrating D3 into an Angular app.
Recommended by 3 people across 3 different months, 2014 to 2014.
What it is
A 2014 AngularJS meetup talk by Victor Powell on building D3 visualizations as reusable Angular directives, covering challenges and best practices. It ends with two short lightning talks, Brian Ford on decorators and Igor Minar on the life of a pull request.
What people said
Recommends Daniel F · 2014-03 · Stack Overflow · on “D3 with Backbone / D3 with Angular / D3 with Ember?”
I have used D3 with Angular on a few dashboards, and it worked very well. I have never really used Backbone, and not with D3, so I cannot compare the two. I chose Angular to complement D3 because it appeared to me that lately the D3 community has been using D3 with Angular the most of the three options you mentioned, so there were great resources available. There has recently been an entire book dedicated to using D3 and Angular together. I had also used Angular a bit before, and was aware of directives. Directives (in Angular it is a way to extend html tags) are great for meshing with D3. Each chart can become a directive, and then makes it extremely easy to reuse charts, changing only the
Recommends link · 2014-07 · Stack Overflow · on “Converting static code into reusable D3.js pie animation”
The best way to do this is to use angular directives. An angular directive basically wraps html inside a custom tag and let's you stamp the directive over and over across multiple pages or multiple times a page. See this video: [this video] There is also a library that is out called nvd3.js that contains prebuilt angular directives that can be re-used: [LINK] Hope this helps.
Recommends haroldcampbell · 2014-12 · Stack Overflow · on “How to inject D3 & D3plus together in Angular webapp?”
I don't think that you pass in the d3 as a dependency. Instead you reference it directly from your js source include (i.e. <script src=" [LINK] "></script> ) You can find a working example here on github [LINK] . Additional examples with source code can be found here: D3.js Visualization Library with AngularJS [LINK] , Angular.js Directives for nvd3.js, d3.js charts [LINK] . If you prefer youtube videos: AngularJS & D3: Directives for Visualizations [this video] -harold