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 )

Unrestrained

Hey, what is wrong with using directive? You can have controller for directive. – Tip

Just trying to do it in the Angular 2 way, for a easier transition in the future, anyway there should be a way to tell d3 - "Select THIS div only in the component, don't look outside ! " – Rebellious

Answer 1

You can pass $element to component controller

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

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

Tip

Hi, thanks for your reply. interesting, this select the component itself and append it, but can i point to the div inside of the component template ? You know, for a specific location where to append it – Rebellious

Sure - just always look for it relative to the $element, the same way you would in a directive. – Undry