D3图表角度指令不呈现

Question

我正在实现基于 this pen 的基于 D3 的角度指令

这是我的代码。 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>

一切似乎都正常，但出现错误 - 访问每个未定义的。

有什么想法吗？

Answer 1

我拿起工作代码笔，编译了咖啡并让它在你的指令中工作。具体来说，访问groups 属性是问题所在。没有组。组基于svg 的g 子元素。此图表仅由div 和span 元素组成，没有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]
      }];
    }