Javascript D3图表角度指令未渲染

我在实现一个基于D3的角度指令

这是我的密码

angular.module（'myApp'，[]）。
//camel大小写指令名
//在HTML中，这将被命名为条形图
指令（'barsChart'，函数（$parse）{
var directiveDefinitionObject={
限制：'E'，
替换：false，
作用域：{data:'=chartData'}，
链接：函数（范围、元素、属性）{
变音和弦，h，弦，w；
w=32；
h=32；
字符串=['E'，'B'，'G'，'D'，'A'，'E']；
console.log（'------------**'，d3.select（元素[0]）；
//console.log（d3.select（元素[0]）.selectAll（'div'）.data（scope.data）.enter（）.append（'div'））；
//console.log（d3.select（元素[0]）.selectAll（'div'）.data（scope.data）.enter（）.append（'div'））；
d3.select（元素[0]）。selectAll（'div'）。data（scope.data）。enter（）。append（'div'）。groups
//attr（{'class'：'chord'}）
.每个功能（和弦，c）{
d3.选择（this）.append（'h3'）.attr({
“类”：“和弦名称”
}).文本（功能（d）{
返回d.name；
});
返回d3.select（this.append（'div'）.attr({
“类”：“字符串”
}).selectAll（'div'）.data（chord.strings）.enter（）.append（'div'）.attr({
“类”：“字符串”
}).每个函数（字符串，s）{
var!；
d3.选择（this）.append（'strong'）.attr({
“类”：“字符串名称”
}).文本（功能（d，i）{
返回字符串[s]；
});
frets=（函数（）{
var j，结果；
结果=[]；
对于（=j=0；j我拿了工作代码笔，编译了咖啡，让它在您的指令内工作。具体来说，访问
groups
属性是个问题。没有组。组基于
svg
的
g
子元素。此图表仅由
div
和
span
元素组成nts，无
svg

angular.module('myApp', []).
    //camel cased directive name
    //in your HTML, this will be named as bars-chart
    directive('barsChart', function ($parse) {

        var directiveDefinitionObject = {
            restrict: 'E',
            replace: false,
            scope: {
                data: '=chartData'
            },
            link: function (scope, element, attrs) {
                var chords, h, strings, w;
                w = 32;
                h = 32;
                strings = ['E', 'B', 'G', 'D', 'A', 'E'];
                   d3.select(element[0]).selectAll('div').data(scope.data).enter().append('div').attr({
                    'class': 'chord'
                }).each(function (chord, c) {
                    d3.select(this).append('h3').attr({
                        'class': 'chord-name'
                    }).text(function (d) {
                        return d.name;
                    });
                    return d3.select(this).append('div').attr({
                        'class': 'strings'
                    }).selectAll('div').data(chord.strings).enter().append('div').attr({
                        'class': 'string'
                    }).each(function (string, s) {
                        var _, frets;
                        d3.select(this).append('strong').attr({
                            'class': 'string-name'
                        }).text(function (d, i) {
                            return strings[s];
                        });
                        frets = function () {
                            var j, results;
                            results = [];
                            for (_ = j = 0; j <= 5; _ = ++j) {
                                if (window.CP.shouldStopExecution(1)) {
                                    break;
                                }
                                results.push(false);
                            }
                            window.CP.exitedLoop(1);
                            return results;
                        } ();
                        frets[chord.strings[s]] = true;
                        console.debug(s, frets);
                        return d3.select(this).append('span').attr({
                            'class': 'frets'
                        }).selectAll('span').data(frets).enter().append('span').attr({
                            'class': 'fret'
                        }).append('span').attr({
                            'class': function (fret, f) {
                                return fret != false ? 'finger' : 'empty';
                            }
                        }).html(function (fret, f) {
                            return fret != false ? f : '&mdash;';
                        });
                    });
                });
            }
        }

        return directiveDefinitionObject;
    });

    function Ctrl($scope) {
      $scope.chords = [{
        name: 'C',
        strings: [0, 1, 0, 2, 3, null]
      }, {
        name: 'D',
        strings: [2, 3, 2, 0, null, null]
      }, {
        name: 'E',
        strings: [0, 0, 1, 2, 2, 0]
      }, {
        name: 'F',
        strings: [1, 1, 2, 3, 3, 1]
      }, {
        name: 'G',
        strings: [3, 3, 0, null, 2, 3]
      }, {
        name: 'A',
        strings: [0, 2, 2, 2, 0, null]
      }, {
        name: 'B',
        strings: [2, 3, 4, 4, 2, null]
      }, {
        name: 'C#',
        strings: [3, 4, 5, 5, 3, null]
      }, {
        name: 'Bm',
        strings: [2, 2, 4, 4, 2, null]
      }, {
        name: 'Bb',
        strings: [1, 3, 3, 3, 1, null]
      }];
    }

angular.module（'myApp'，[]）。
//camel大小写指令名
//在HTML中，这将被命名为条形图
指令（'barsChart'，函数（$parse）{
var directiveDefinitionObject={
限制：'E'，
替换：false，
范围：{
数据：'=图表数据'
},
链接：函数（范围、元素、属性）{
变音和弦，h，弦，w；
w=32；
h=32；
字符串=['E'，'B'，'G'，'D'，'A'，'E']；
d3.select（元素[0]）。selectAll（'div'）。data（scope.data）。enter（）。append（'div'）。attr({
“类”：“和弦”
}).每个功能（和弦，c）{
d3.选择（this）.append（'h3'）.attr({
“类”：“和弦名称”
}).文本（功能（d）{
返回d.name；
});
返回d3.select（this.append（'div'）.attr({
“类”：“字符串”
}).selectAll（'div'）.data（chord.strings）.enter（）.append（'div'）.attr({
“类”：“字符串”
}).每个函数（字符串，s）{
var!；
d3.选择（this）.append（'strong'）.attr({
“类”：“字符串名称”
}).文本（功能（d，i）{
返回字符串[s]；
});
frets=函数（）{
var j，结果；
结果=[]；
对于（=j=0；j）这很有效。除此之外，我使用的是最新的D3（4.1），所以我也不得不恢复到3.5.17。