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

• 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

1 Answer 1

You can pass $element to ponent controller

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

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