D3图表角度指令无法渲染

Question

I was implementing a D3 based angular directive based on this pen

This is my code. Codepen link

 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']; console.log('----------****',d3.select(element[0])); //console.log(d3.select(element[0]).selectAll('div').data(scope.data).enter().append('div')); //console.log(d3.select(element[0]).selectAll('div').data(scope.data).enter().append('div')); d3.select(element[0]).selectAll('div').data(scope.data).enter().append('div').groups //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) { results.push(false); } 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] } ]; } 

 .chord { float: left; padding: 1.2em; margin: .6em 0 0 .6em; font-family: monospace; background-color: #F0F0F0; } .chord .chord-name { font-size: 1.6em; color: brown; margin-bottom: .8em; } .chord .strings .string .string-name { padding: .4em; padding-left: .8em; border-radius: .8em 0 0 .8em; background-color: gold; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); } .chord .strings .string .frets { background-color: #FFF; border: 1px solid lightgray; margin-top: -1px; display: inline-block; } .chord .strings .string .frets .fret { text-align: center; padding: .3em; display: inline-block; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #dadada 44%, #a7a7a7 54%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%); } .chord .strings .string .frets .fret span { line-height: 1.2em; display: inline-block; padding: .2em .4em; } .chord .strings .string .frets .fret:first-child { background-color: rgba(0, 0, 0, 0.5); opacity: .4; } .chord .strings .string .frets .fret:not(:last-child) { border-right: 5px ridge rgba(255, 165, 0, 0.4); } .chord .strings .string .frets .fret .finger { border-radius: .8em; background-color: maroon; color: white; box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.6); } .chord .strings .string .frets .fret .empty { opacity: 0; } 

 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <div ng-app="myApp" ng-controller="Ctrl"> <bars-chart chart-data="chords" ></bars-chart> </div> 

Everything seems ok but am getting the error - accessing each of undefined.

Any ideas?

Answer 1

I took the working code pen, compiled the coffee and got it working inside your directive. Specifically, accessing the groups property was the problem. There are no groups. Groups are based on the g sub-element of svg . This chart is only made up of div and span elements, no 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]
      }];
    }