Angular & D3.js: Warum ist Element [0] undefiniert?

Question

Ich arbeite an einer eckigen Anwendung und beginne gerade mit D3.js.

Ich folge einem Tutorial, um benutzerdefinierte Direktiven zu erstellen.

<my-chart></my-chart> 

Ich tue dies:

... 

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

     ... 

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

... 

Aber ich bin immer wieder immer wieder ReferenceError: element is not defined

Wenn ich meine Richtlinie eine ID geben, dann funktioniert alles:

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

I Ich bin mir nicht sicher, warum, da ich mit der element sprechen kann, wenn es ein i d, ich denke nicht, dass es ein Timing-Problem ist. Aber ich weiß nicht, was es sonst noch sein könnte. Irgendwelche Vorschläge werden sehr geschätzt!

Answer 1

Momentan haben Sie in der Link-Funktion element nicht angegeben und Sie suchten nach einem Element, das nicht definiert ist. Sie sollten element in Ihrer link Funktion haben, um Zugriff auf angular kompiliertes DOM zu erhalten.

function link(scope, element, attrs) {