Damon Damon - 2 months ago 10
Javascript Question

Angular & D3.js: Why is element[0] undefined?

I am working on an angular application and just starting to work with D3.js.

I am following along on a tutorial to create custom directives.

<my-chart></my-chart>


I am doing this:

...

.directive('myChart', function () {
function link() {
var svg = d3.select(element[0]).append('svg');

...

return {
'link': link,
'restrict': 'E'
}
})

...


But I am always getting back
ReferenceError: element is not defined


If I give my directive an id, then everything works:

...
var svg = d3.select(document.getElementById('myChart')).append('svg');
...


I am not sure why as since I am able to talk to the
element
when it has an id, I don't think it's a timing problem. But, I don't know what else it could be. Any suggestions are greatly appreciated!

Answer

Currently you haven't specified element in link function, and you were looking for element which is undefined. You should have element in your link function to get access to angular compiled DOM.

function link(scope, element, attrs) {
Comments