D3圖表角度指令無法渲染

Question

我正在基於這支筆實現基於D3的角度指令

這是我的代碼。 Codepen鏈接

 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> 

一切似乎都沒問題，但我得到了錯誤 - 訪問每個undefined。

有任何想法嗎？

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]
      }];
    }