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 ponents 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 ponents. 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 ponent ).

---

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

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

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 .ponents 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 ponents. 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 ponent ).

---

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

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

• javascript
• angularjs
• angularjs-ponents
• d3.js

Share Improve this question Follow edited Aug 18, 2016 at 8:54 Héctor León asked Aug 18, 2016 at 8:13 Héctor LeónHéctor León 2,41022 gold badges2727 silver badges4040 bronze badges 2

• Hey, what is wrong with using directive? You can have controller for directive. – terafor Commented Aug 18, 2016 at 9:15
• 1 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 ponent, don't look outside ! " – Héctor León Commented Aug 18, 2016 at 9:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You can pass $element to ponent controller

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

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