Why use element[0] instead of element when creating AngularJS directive with d3?

Question

It seems that you have to use element[0] when creating a directive with D3, for example, like below:

app.directive('firstTry', function () {
    function link(scope, element, attrs) {
        var sampleSVG = d3.select(element[0])
        ...

So, why element[0] but not element? The name element suggests that it is a single object rather than an array, but apparently that's not the case. Another question: what else does this element have?

BTW, any official references about this matter would greatly help.

Thank you very much.

Answer 1

Directives that want to modify the DOM typically use the link option. link takes a function with the following signature, function link(scope, element, attrs) { ... } where:

• scope is an Angular scope object.
• element is the jqLite-wrapped element that this directive matches.
• attrs is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.

you can find it in documentation here . So to key htmlElement entity - get first member of collection