D3.js 4 with AngularJS 1.5 ( Components or Directives ? )

Question

i want to use D3.js v4 with AngularJS 1.5x

In the past i used .directives for the charts, but now i was wondering if it's possible use .components instead of directives, and if it's a good practice.

Check the sample case on Plunkr

The problem appears with the d3.select(element[0]).append('svg') within components. The console throw an error: element is not defined.

so i tried with something like d3.select('chart-container').append('svg') but then d3 inject all the charts in the first element which own that class ( look for the class in all the document, not only the component ).

---

So... can someone help me to do a right d3.select() for a reusable component ?

without add different ID's for each one ( too much work and too hard for maintain )

Answer 1

You can pass $element to component controller

svg     = d3.select($element[0]).append('svg'),

http://plnkr.co/edit/SMoYLtx4I8RuLf285R6J?p=preview