Damon Damon - 1 year ago 76
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.


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
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 Source

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) {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download